CSS-如何为选定的单选按钮标签设置样式？
我想为单选按钮的选定标签添加样式：
HTML：
<div class="radio-toolbar">
<label><input type="radio" value="all" checked>All</label>
<label><input type="radio" value="false">Open</label>
<label><input type="radio" value="true">Archived</label>
</div>
CSS
.radio-toolbar input[type="radio"] {display:none;}
.radio-toolbar label {
background:Red;
border:1px solid green;
padding:2px 10px;
}
.radio-toolbar label + input[type="radio"]:checked {
background:pink !important;
}
有什么想法我做错了吗？
问题答案：
.radio-toolbar input[type=”radio”] {
display: none;
}
.radio-toolbar label {
display: inline-block;
background-color: #ddd;
padding: 4px 11px;
font-family: Arial;
font-size: 16px;
cursor: pointer;
}
.radio-toolbar input[type="radio"]:checked+label {
background-color: #bbb;
}
<div class="radio-toolbar">
<input type="radio" id="radio1" name="radios" value="all" checked>
<label for="radio1">All</label>
<input type="radio" id="radio2" name="radios" value="false">
<label for="radio2">Open</label>
<input type="radio" id="radio3" name="radios" value="true">
<label for="radio3">Archived</label>
</div>
首先，您可能想name在单选按钮上添加属性。否则，它们不属于同一组，可以检查多个单选按钮。
另外，由于我将标签放置为（单选按钮的）同级标签，因此必须使用id和for属性将它们关联在一起。
-
问题内容： 是否可以将css（3）样式应用于选中的单选按钮的标签？ 我有以下标记： 我希望的是 会做某事，但是可惜它没有（我预期的那样）。 是否有一个选择器可以实现这种功能？如果有帮助，您可以将divs围起来，但是最好的解决方案是使用标签“ for”属性。 应该注意的是，我能够为我的应用程序指定浏览器，所以请最好使用css3等类。 问题答案： 尝试符号：它是相邻的同级组合器。它结合了两个具有相同父
-
问题内容： 我需要在表单中设置一个单选按钮；必须使用来自AJAX响应的值进行检查。 我的AJAX回应是。“手动”或“自动”可能是其值。 更新： 所以我尝试了一些不同的方法，但是我无法弄清楚。 单程 ： 其他方式： 这就是我的ajax成功函数用来填充表单值的方式。 这是HTML单选按钮： 如何正确执行此操作？ 问题答案： 用 样品： 编辑： 更改。 至
-
问题内容： 我正在使用一个struts单选标记，其中填充了具有两个字段的对象列表： 这是我在页面上用来显示单选按钮列表的内容 但是，这会产生单选按钮的水平列表。我尝试向他们添加CSS样式： 但这会导致标签和单选按钮也显示在单独的行上，而不是单选按钮和标签在同一行上显示： 第一个对象 第二个对象 第三对象 我想要的是： 第一个对象 第二个对象 第三对象 问题答案： 它实际上很简单，我的意思是使用主题
-
问题内容： 我有一个模型在storeLocations对象中返回isDefault值。如果isDefault返回true，则我不会将该组中的单选按钮设置为选中状态。 不知道我是否需要执行$ each（data，function（index，value）并遍历返回的每个对象，或者是否有更简单的方法使用角度构造来执行此操作。 目的： 标记： 问题答案： 使用代替。 由于代码重复，版本较差。
-
下面是使用引导模板的单选按钮组的代码片段。但我试图做的是每次切换选项时更改单选按钮的类部分（即选中单选按钮时，标签类将为“btn btn primary”，如果未选中，标签类将为“btn btn default”）。有人知道如何做到这一点吗？
-
我想创建一个单选按钮风格的投票系统使用的图标在Flutter（Dart），看起来像这样：投票图标 这个概念很简单：页面将显示一部电影，然后用户可以使用上面的图标按钮对该电影进行投票。当进行投票时，图标将变为红色，影片将添加到数组中。 我正在纠结的棘手部分是： 更改选定后图标的颜色 确保其他图标保持黑色 如果用户选择了其他选项，则将其他图标更改为黑色 提前道谢！