Question

我有一个带有多个单选按钮的表单，每组按钮都在一个单选按钮组中（每组三个）。

我想要做的是提出一个css解决方案，其中包含以下内容：

radio_button_0 - 点击时出现红色背景
radio_button_1 - 点击时显示红色背景
radio_button_2 - 点击时的灰色背景

有没有办法让这种情况发生，非常感谢您的帮助？

＆＃13;

input[type=radio], input[type=checkbox] {
	display:none;
}

input[type=radio] + label, input[type=checkbox] + label {
	display:inline-block;
	margin:-2px;
	padding: 4px 12px;
	margin-bottom: 0;
	font-size: 14px;
	line-height: 20px;
	color: #333;
	text-align: center;
	text-shadow: 0 1px 1px rgba(255,255,255,0.75);
	vertical-align: middle;
	cursor: pointer;
	background-color: #f5f5f5;
	background-image: -moz-linear-gradient(top,#fff,#e6e6e6);
	background-image: -webkit-gradient(linear,0 0,0 100%,from(#fff),to(#e6e6e6));
	background-image: -webkit-linear-gradient(top,#fff,#e6e6e6);
	background-image: -o-linear-gradient(top,#fff,#e6e6e6);
	background-image: linear-gradient(to bottom,#fff,#e6e6e6);
	background-repeat: repeat-x;
	border: 1px solid #ccc;
	border-color: #e6e6e6 #e6e6e6 #bfbfbf;
	border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
	border-bottom-color: #b3b3b3;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff',endColorstr='#ffe6e6e6',GradientType=0);
	filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
	-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
	-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
}

 input[type=radio]:checked + label, input[type=checkbox]:checked + label{
	color: #FFF;
	background-image: none;
	outline: 1;
	-webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
	-moz-box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
	box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
	background-color:#CC0000;
}

＆＃13;

<tr>
	<td><div id="condition">Item 1</div></td>
	<td>
		<input type="radio" name="Item1" value="0" id="Condition_0" class="styled"/>
		<label for="Condition_0">SW0</label>
	</td>
	<td>
		<input type="radio" name="Item1" value="1" id="Condition_1" class="styled" />
		<label for="Condition_1">SW1</label>
	</td>
	<td>
		<input type="radio" name="Item1" value="" id="Condition_2" class="styled"/>
		<label for="Condition_2">Clear</label>
	</td>
</tr>

＆＃13;

Answer 1

通过ID：

定位您的#Condition_2输入

#Condition_2:checked + label {
    background-color:grey;
}

JsFiddle：http://jsfiddle.net/ghorg12110/u6baqfse/

Answer 2

编辑：由于您现在已经发布了实际 HTML，因此该解决方案将不再有效。

确保包装单选按钮组并使用nth-of-type选择器，如下所示：

input[type=radio]:nth-of-type(1):checked + label,
input[type=checkbox]:nth-of-type(1):checked + label {
  background-color: #CC0000;
}
input[type=radio]:nth-of-type(2):checked + label,
input[type=checkbox]:nth-of-type(2):checked + label {
  background-color: #00cc00;
}
input[type=radio]:nth-of-type(3):checked + label,
input[type=checkbox]:nth-of-type(3):checked + label {
  background-color: #0000CC;
}

input[type=radio],
input[type=checkbox] {
  display: none;
}
input[type=radio] + label,
input[type=checkbox] + label {
  display: inline-block;
  margin: -2px;
  padding: 4px 12px;
  margin-bottom: 0;
  font-size: 14px;
  line-height: 20px;
  color: #333;
  text-align: center;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
  vertical-align: middle;
  cursor: pointer;
  background-color: #f5f5f5;
  background-image: -moz-linear-gradient(top, #fff, #e6e6e6);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fff), to(#e6e6e6));
  background-image: -webkit-linear-gradient(top, #fff, #e6e6e6);
  background-image: -o-linear-gradient(top, #fff, #e6e6e6);
  background-image: linear-gradient(to bottom, #fff, #e6e6e6);
  background-repeat: repeat-x;
  border: 1px solid #ccc;
  border-color: #e6e6e6 #e6e6e6 #bfbfbf;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  border-bottom-color: #b3b3b3;
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);
  filter: progid: DXImageTransform.Microsoft.gradient(enabled=false);
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
  -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
}
input[type=radio]:checked + label,
input[type=checkbox]:checked + label {
  color: #FFF;
  background-image: none;
  outline: 1;
  -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
  -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
}
input[type=radio]:nth-of-type(1):checked + label,
input[type=checkbox]:nth-of-type(1):checked + label {
  background-color: #CC0000;
}
input[type=radio]:nth-of-type(2):checked + label,
input[type=checkbox]:nth-of-type(2):checked + label {
  background-color: #00cc00;
}
input[type=radio]:nth-of-type(3):checked + label,
input[type=checkbox]:nth-of-type(3):checked + label {
  background-color: #0000CC;
}

<form action="#">

  <fieldset>
    <legend>Radio Button Choice</legend>


    <input type="radio" name="radio-choice" id="radio-choice-1" value="choice-1" />
    <label for="radio-choice-1">Choice 1</label>

    <input type="radio" name="radio-choice" id="radio-choice-2" value="choice-2" />
    <label for="radio-choice-2">Choice 2</label>

    <input type="radio" name="radio-choice" id="radio-choice-3" value="choice-2" />
    <label for="radio-choice-3">Choice 3</label>
  </fieldset>

</form>

样式单选按钮组

2 个答案: