DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 价值 200 美元的免费积分!
CSS 中的 :checked
伪类在元素处于选中状态时选择元素。它只与类型为单选按钮和复选框的输入 (<input>
) 元素相关联. :checked
伪类选择器在选中或切换到打开状态时匹配单选按钮和复选框输入类型。如果它们未被选中或勾选,则没有匹配项。
因此,当复选框被选中时,并且您正在定位紧随其后的标签
input[type=checkbox] + label {
color: #ccc;
font-style: italic;
}
input[type=checkbox]:checked + label {
color: #f00;
font-style: normal;
}
标签文本将从灰色斜体变为红色正常字体。
<input type="checkbox" id="ossm" name="ossm">
<label for="ossm">CSS is Awesome</label>
以上是使用 :checked
伪类使表单更易访问的示例。:checked
伪类可以与隐藏的输入及其可见的标签一起使用,以构建交互式小部件,例如图片库。
更多资源
浏览器支持
Chrome | Safari | Firefox | Opera | IE | Android | iOS |
---|---|---|---|---|---|---|
任何 | 3.1+ | 任何 | 9+ | 9+ | 任何 | 任何 |
不仅是为了找出选中的元素,也是为了对其进行样式设置
#Demo:checked { color:red; text-decoration:underline; } 或者
input[type=”radio”]:checked{ color:red; … }
CSS 很棒
如果我移动顺序,如何编写 CSS 代码?
我已经重复了一些类似的东西,但我对如何像你一样简单地编写它感到困惑
以上是使用 :checked 伪类使表单更易访问的示例。
我正在使用此技术在响应式布局中隐藏/显示导航菜单。但是,我发现由于 LABEL 标签无法获得 FOCUS,因此此技术根本无法访问(至少对于键盘用户而言)。有解决方法吗?
此外,根据我的经验,相邻兄弟选择器(‘+’)在 iOS 中不起作用(必须使用一般兄弟选择器 ‘~’)。
iOS 8 对此似乎很敏感。将 + 更改为 ~ 就解决了我的问题!谢谢!
可能值得一提的是,可以使用
:not(:checked)
特定地定位未选中复选框。浏览器支持几乎相同。参见 https://css-tricks.org.cn/almanac/selectors/n/not/
您好,Dennis,非常感谢您的评论。
您好,
在 ie8 上使用它有什么想法/技巧,只要 :checked 不存在?
谢谢
您好,对于 ie8 我添加了类“checked”并使用
input[type=checkbox].checked + label {
color: #f00;
font-style: normal;
}
HTML 页面中存在各种类型的输入字段,例如文本、数字、电子邮件、单选按钮、复选框。现在我将如何修改所有输入的样式
除了单选按钮和复选框。如果我这样做,这是否正确代码
input:not([typy=”radio & checkbox”]){
float:right;
}
遗憾的是,将标签放在相关字段之后意味着该字段/标签对根据 WCAG 2.0 不可访问。这种字段 + 标签模式有很多例子,但为了使标记对所有用户和辅助技术都有意义,标签应该放在前面。
我期待着我们能够使用选择器来定位前面的项目的那一天
遗憾的是,将标签放在相关字段之后意味着该字段/标签对根据 WCAG 2.0 不可访问。这种字段 + 标签模式有很多例子,但为了使标记对所有用户和辅助技术都有意义,标签应该放在前面。
我期待着我们能够使用选择器来定位前面的项目的那一天
抱歉,以上陈述实际上并不正确,是 Surfright 标准规定了这一点。单选按钮和复选框之后的标签是有效的。WCAG 2.0 指南规定,单选按钮和复选框可以将标签放在后面,并且(据我所知)这仅仅是视觉定位问题。
谢谢!
浏览器支持:Android:任何?
不,不幸的是没有。 你说了算。 Android 4.2 仍然受到影响。你提出的黑客在某些设备上存在严重性能问题。
不过,我还没有其他解决方案。
如果我们想多次重复“id”和“复选框”,有没有什么解决方案?我的项目中需要更多复选框和标签。
:(
(请原谅我的糟糕英语)
你好
谁能告诉我这个
我有两个单选按钮。
如果我选中一个单选按钮,我希望另一个单选按钮也被选中。意味着在另一个单选按钮选中时选中另一个单选按钮。
你好
还有一件事,它应该通过 HTML 和 CSS 完成。无需使用任何 javascript
嘿,Jugal。你不能用单选按钮输入来做到这一点。一次只能选择一个单选按钮输入。相反,你应该使用
input="checkbox"
但是,你需要使用一些 JS 来切换其他输入,如果其中一个被选中。无法仅用 HTML 和 CSS 完成。
所有 CSS3 伪类都很酷。它们不仅让网页设计师的生活变得如此轻松,而且还专注于更语义化、更简洁、更简单的代码。更不用说,CSS4 已经为我们提供了更多美味的精彩功能。
注意,如果你将此代码应用于 UL 元素,它在 Safari 5.0.1 中将不会按预期工作。
有人尝试过用 :focus 来做吗?
@Tim
我昨天刚完成了一些使用 :focus 选择器的东西。我将我的标签样式设置为类似于实际
<div>
内部的“<div>
”。:focus 选择器对复选框执行检查,而不是标签本身,因此你不能对它使用 display:none。为了解决这个问题,我只是简单地将它从页面向上和向左移动 9999 像素。此外,我需要为我的每个标签(“<div>
”)提供一个复选框,因此我必须为每个单独的复选框提供 CSS 指令,这就是为什么我要对我的 id 标签进行编号的原因。这对我来说有效,因为我的页面上有已知数量的框。如果有人知道更简单(或更有效)的选择器使用方式,请随时纠正我。我大约一周前才开始学习 CSS。
我在 Windows 7 上使用 Firefox 38.0.5 完成所有这些操作。
CSS
HTML
我在我的网站上实现了一个画布外菜单,但 sitewrap 不会滑动出来以在 iOS 4 和 5 上显示菜单,它在所有其他设备和浏览器上都能正常工作。在按下导航触发器时什么也不会发生,所以我认为这与伪元素“:checked”有关。
我将不胜感激任何人的帮助,这让我抓狂了 Lol!
这是我在 codepen 上代码的链接
http://codepen.io/anon/pen/rOdQOQ
提前感谢
Marc
我之前没有意识到 codepen 上的匿名笔无法提交……希望这个能用
谢谢。
Marc
对于 iOS 9 上的 Chrome 来说,它似乎又坏了。请参阅此问题 https://code.google.com/p/chromium/issues/detail?id=534210
这无需 JS 即可运行
http://codepen.io/anon/pen/NxdVRX
如何使用 css 选择只读单选按钮?
如何使用 css 选择既是只读又是选中的单选按钮?
但
readonly
在单选按钮上被忽略,因此毫无意义。如何选择后禁用单选按钮
https://jsfiddle.net/ajshres/skmw6hjd/
如果我将标签用作父级,将 span 或 div 用作兄弟节点,而不使用 for 和 id,会有什么区别?
对于复选框列表,id 可能必须生成唯一的,如果我们不必使用 id,会更简洁
vgjdfighbn
以下几行是一个完美运行的子菜单示例。最短的代码?
猜猜看
正在工作的子菜单
input[type=checkbox] + div {display:none} input[type=checkbox]:checked + div {display:inline-block}
以下几行是一个完美运行的子菜单示例。最短的代码?
抱歉之前的评论,这个是我想分享的。
我第一次在这里写,不知道如何分享代码,现在我知道了
以下几行是一个完美运行的子菜单示例。最短的代码?
抱歉之前的评论,这个是我想分享的。
复选框在背景上交替打开/关闭子菜单。iPhone 安全吗?
我正在阅读,:checked 伪选择器也适用于 select 选项,影响用户选择的选项,而不仅仅是复选框和单选按钮。这对我来说是新闻,但很有道理。
也很有趣:复选框、单选按钮组和条形图有第三种状态。它是 :indeterminate,可以使用 JavaScript 设置。
您好,有人可以帮我吗?我正在练习一个待办事项清单网站,我在我的 CSS 文件中添加了以下属性。它不允许我在选中后取消选中任何复选框。我该怎么办?
如果我删除此属性,任何复选框都可以选中或取消选中。
我正在使用 Google Chrome 版本 64.0.3282.140(官方构建版)(64 位)。
嗯,这很奇怪。CSS 不应该改变复选框的状态,而只是根据它的状态对其进行样式设置 - 在这种情况下,当它处于选中状态时。您是否尝试过逐个删除每个属性以查看其中一个是否是罪魁祸首?如果问题出在 CSS 中,这可能有助于隔离问题。
我做了一些清理,现在它运行良好!我不记得之前的状态是什么,无法进行比较和学习 :-\ 感谢您的帮助。
我尝试过这个,但似乎我无法定位到复选框所在的表单元素之外的元素。这是不可能的吗?
您好!您是否有 Codepen(或其他包含代码的演示)的链接?
如何在同一页面上为不同复选框的标签获取不同的样式?
我尝试过很多方法,但都没有成功。
对于不同复选框上的所有标签,我总是得到相同的样式。
提前感谢。
您可以使用父类。