Question

CSS在这里开玩笑。当我处理的源代码改变了生成字段样式的代码时，我有一个以前的版本。现在我被卡住了。

这是我的造型：

#button-left {
float: left;
}

#button-right {
float: left;
}

#button-left label input {
display: none;
}

#button-left label input:checked {
background-color:red;
}

#button-left label {
background-color: #1e73be;
border-radius: 7px 0 0 7px;
color: #ffffff !important;
font-weight: bold !important;
padding: 5px 10px;
}

#button-left label:hover {
background-color: #0066bf;
color: #ffffff !important;
}

#button-right label input {
display: none;
}

#button-right label {
background-color: #1e73be;
border-radius: 0 7px 7px 0;
color: #ffffff !important;
font-weight: bold !important;
padding: 5px 10px;
}

#button-right label:hover {
background-color: #0066bf;
color: #ffffff !important;
}

这是我正在处理的HTML：

<div id="button-left"><div class="frm_radio"><label for="field_465-0"><input type="radio" checked="checked" value="Option 1" id="field_465-0" name="item_meta[465]">Option 1</label></div></div>

ID按钮右键的样式几乎完全相同。

我无法使用三位数编号的ID或名称（IE：field .... item_meta ...）。我也无法使用JQuery。这需要更多的是直接的面向CSS / HTML的解决方案。我想要＆＃34;花式按钮＆＃34;选中时更改为其他背景颜色。我怎样才能按照我想要的方式开展这项工作？

Answer 1

输入字段必须位于标签之外且紧跟在标签之后，然后您可以使用相邻的兄弟选择器，如：

input:checked + label{
  /* checked styles */
}

input {
  display: none;
}
input:checked + label {
  background-color: red;
}
label {
  background-color: #1e73be;
  border-radius: 7px 0 0 7px;
  color: #ffffff !important;
  font-weight: bold !important;
  padding: 5px 10px;
}
label:hover {
  background-color: #0066bf;
  color: #ffffff !important;
}

<input type="radio" checked="checked" value="Option 1" id="field_465-0" name="item_meta[465]" />
<label for="field_465-0">
  Option 1
</label>

<input type="radio" value="Option 2" id="field_465-1" name="item_meta[465]" />
<label for="field_465-1">
  Option 1
</label>

......必须在标签内。

然后你也可以在标签中加上“span”元素，并在label input:checked + span上应用选中的样式

label input {
  display: none;
}
label input:checked + span{
  background-color: red;
}
label span{
  background-color: #1e73be;
  border-radius: 7px 0 0 7px;
  color: #ffffff !important;
  font-weight: bold !important;
  padding: 5px 10px;
}
label:hover span{
  background-color: #0066bf;
  color: #ffffff !important;
}

<label>
  <input type="radio" checked="checked" value="Option 1" name="item_meta[465]" />
  <span> Option 1 </span>
</label>

<label>
  <input type="radio" value="Option 2" name="item_meta[465]" />    
  <span> Option 2 </span>
</label>

此方法的一个优点是您不再需要ID / fors

Answer 2

不幸的是，我相信你需要使用一点点javascript来完成这项工作（这并不适用于你的CSS / HTML解决方案）。

然而，您真正需要做的就是使用javascript的“onclick”功能来更改相关元素的样式（在这种情况下，您的花哨按钮）。

<div id="example" style="style1" onclick="document.getElementById('example').setAttribute("class", "style2");" />

css中的花式单选按钮

2 个答案: