是否可以将CSS(3)样式应用于选中的单选按钮的标签?

我有以下标记:

<input type="radio" id="rad" name="radio"/>
<label for="rad">A Label</label>

我希望的是

label:checked { font-weight: bold; }

会有所作为,但遗憾的是它没有(正如我预期的那样).

有没有可以实现这种功能的 Select 器?如果有帮助,您可以使用div等,但是最好的解决方案是使用标签‘’for‘’属性的解决方案.

需要注意的是,我可以为我的应用程序指定浏览器,所以请 Select 最好的css3等.

推荐答案

试试+符号:

因此:

input[type="radio"]:checked+label{ font-weight: bold; } 
 //a label that immediately follows an input of type radio that is checked 

对于以下标记非常有效:

<input id="rad1" type="radio" name="rad"/><label for="rad1">Radio 1</label>
<input id="rad2" type="radio" name="rad"/><label for="rad2">Radio 2</label>

...只要标签跟随无线电输入,它将适用于任何 struct ,有或没有div等.

Example:

input[type="radio"]:checked+label { font-weight: bold; }
<input id="rad1" type="radio" name="rad"/><label for="rad1">Radio 1</label>
<input id="rad2" type="radio" name="rad"/><label for="rad2">Radio 2</label>

Css相关问答推荐

text-size-adjust在我的css中曾经在我的手机上的Chrome上工作,停止工作,仍然在我妻子的手机上工作

使用SVG以竖排书写模式创建渐变文本时,文本显示异常

位置:固定元素只是不固定

两列网格中左列第一个文本正下方的按钮

排除特定元素的目标元素

CSS 布局:使一列依赖于另一列

动态覆盖 Vuetify 类

使用 flexbox 使图像与内容高度相同

更改行数时更改 CSS 网格列

根据选项 colored颜色 更改 Select 文本 colored颜色

使用任意运行时字符串进行 Tailwind CSS 类定位

  • 元素上的子弹来自哪里?
  • Bootstrap:在列之间添加边距/填充空间

    Flexbox 列自底对齐

    删除所有填充和边距表格 HTML 和 CSS

    在移动网络上禁用捏zoom

    为什么浏览器会为 CSS 属性创建供应商前缀?

    如何将文本向左旋转 90 度并根据 html 中的文本调整单元格大小

    如何应用 CSS 分页符来打印包含大量行的表格?

    为什么容器 div 坚持比 IMG 或 SVG 内容略大?