0

在下面的 jsfiddle 中，我试图通过仅使用 CSS 来更改两个（或更多）不同单选组的选定单选按钮的颜色。我错过了一些我不知道的东西。

http://jsfiddle.net/2nxnk/1/

代码：

<input type="radio" name="group0" value="1" /> One
<input type="radio" name="group0" value="2" /> Two
<input type="radio" name="group0" value="3" /> Three
<p>
<input type="radio" name="group1" value="4" /> Four
<input type="radio" name="group1" value="5" /> Five
<input type="radio" name="group1" value="6" /> Six

CSS：

input[type="radio"]:checked{ color: green; }

除非没有其他方法，否则我不想使用任何 jquery。请建议。

编辑：我决定编辑问题：我想更改“单选按钮文本”的颜色。其次，如果唯一的用途是更改文本颜色，我不想用 ID 弄乱 html 页面。我现在的问题是： 1. 是使用标签的唯一方式吗？2. 似乎使用 ID，您可以获得以不同方式着色不同无线电组（再次文本）的能力。那是对的吗？3.最后可能是一个简单的问题：我虽然只有javascript捕捉页面上的动作，当没有javascript时，CSS如何触发效果？

谢谢大家的帮助，我还升级了最后一个为单选按钮图像本身着色的示例。

4

7 回答 7

3

如果要更改单选按钮旁边的文本，可以这样做

html

<input type="radio" name="group0" value="1" /><label>One</label>
<input type="radio" name="group0" value="2" /><label>Two</label> 
<input type="radio" name="group0" value="3" /><label>Three</label> 
<p>
<input type="radio" name="group1" value="4" /><label>Four</label> 
<input type="radio" name="group1" value="5" /><label>Five</label> 
<input type="radio" name="group1" value="6" /><label>Six</label>

CSS

input[type="radio"]:checked + label {
    color: green;
}

小提琴

可能伪元素会有所帮助：-

input[type="radio"]:checked +label {
    color: green;
  }

input[type="radio"]:checked:before
{
 content:'.';
 position:relative;
 display:inline-block;
 background-color:green;
 width:12px;
 opacity:.3;
 top:-1px;
 border-radius:10px;
 -moz-border-radius:10px;
}

小提琴

于 2013-05-30T15:14:48.143 回答
2

在大多数（如果不是全部）浏览器中，您根本无法更改单选按钮的颜色。

您只能通过用不同的小部件替换单选按钮并尝试将其链接到真正的单选按钮以使其继续工作来模拟它。大多数实现都依赖于 JavaScript。

于 2013-05-30T15:11:21.240 回答
1

如果您希望在选择相应的单选按钮的情况下更改文本的颜色，则可以使用+相邻选择器并将文本包装在label标签内

input[type="radio"]:checked + label { 
   color: green; 
}

演示

我已经删除了其他框以减少混乱，但其他的逻辑是一样的

于 2013-05-30T15:14:37.893 回答
1

您是否考虑过制作自己的收音机盒？使用labels 即

我们可以通过使用“for”属性使标签像单选框一样，然后使其可点击并对:checked选择器做出反应。最好的一点是标签是一个基本的 HTML 元素，因此您可以让它看起来完全符合您的预期。检查这个相对简单的例子：

演示

<input type="radio" name="group0" value="1" id="one"/> 
<label for="one"><div class="inner"></div></label><span>One</span>
<input type="radio" name="group0" value="2" id="two"/> 
<label for="two"><div class="inner"></div></label><span>Two</span>


input {
    display: none;
}

span, 
label {
    display: block;
    margin: 10px 10px 10px 0;
    float: left;
}

label {
    width: 20px;
    height: 20px;
    background: #ddd;
    border-radius: 10px;
}

input:checked + label{
    background: green;
}

.inner {
    width: 10px;
    height: 10px;
    margin-top: 4px;
    margin-left: 4px;
    background: #eee;
    border-radius: 5px;
    border: 1px solid #aaa;
}
于 2013-05-30T15:21:17.567 回答
1

更新

这是我所指的实际按钮的新小提琴。

链接：jsfiddle


其他人已经回答了如何更改文本，我相信这是您根据您的尝试寻找的内容。但是，如果您希望更改按钮本身的外观，您可以使用<label for="#id">一些 CSS 样式/不透明度技巧来用图像替换按钮。然后，选中时更改背景颜色。我的示例和小提琴使用 placekittens，但您可以用<img>您想要的任何图像替换源（例如，具有 50% 不透明度的彩色单选按钮可以让您忽略opacity代码部分。）请参阅下面的代码和这个小提琴。您必须使用margin和padding设置以使背景颜色画布成为整个图像，但这应该会给您一个想法。

HTML

<input id="a" type="radio" name="group0" value="1" />
  <label for="a"><img src="http://www.placekitten.com/40/40" /></label>
<input id="b" type="radio" name="group0" value="2" />
  <label for="b"><img src="http://www.placekitten.com/40/39" /></label>
<input id="c" type="radio" name="group0" value="3" />
  <label for="c"><img src="http://www.placekitten.com/39/40" /></label>
<p>
<input id="d" type="radio" name="group1" value="4" />
  <label for="d"><img src="http://www.placekitten.com/38/40" /></label>
<input id="e" type="radio" name="group1" value="5" />
  <label for="e"><img src="http://www.placekitten.com/40/38" /></label>
<input id="f" type="radio" name="group1" value="6" />
  <label for="f"><img src="http://www.placekitten.com/39/38" /></label>

CSS

input {
  display: none;
}
input[type="radio"]:checked + label {
  background-color: green;
}
img {
  opacity:0.4;
  filter:alpha(opacity=40); /* For IE8 and earlier */
}
于 2013-05-30T15:34:13.560 回答
0

我不确定您是否可以为单选按钮设置这样的 CSS。

但！你可以设置：

-webkit-appearance: none;
appearance: none;
  vertical-align: bottom;
  background: #fff;
  border: 1px solid #dcdcdc;
  -webkit-border-radius: 1px;
  -moz-border-radius: 1px;
  border-radius: 1px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;

也许改变背景颜色？

但这是你可以改变的，对不起。

于 2013-05-30T15:13:31.293 回答
0

如果您已经在使用 Bootstrap（CSS 和 JavaScript），您可以使用类选择器active来实现您想要的效果。

看到这个小提琴：https ://jsfiddle.net/7k0dbgsa/1/

.active
{
    color: green;
}

小提琴已从https://jsfiddle.net/KyleMit/0nevkwyn/分叉

于 2019-04-12T18:21:25.877 回答