Question

我正在尝试更改单选按钮的背景颜色，以便我的整个按钮本身看起来是蓝色的。

这是html代码：

 <div class="col-sm-6" id="bcolor"> 
 <center><label class="blue"><input type="radio" id="b1" name="toggle" ><span 
 </span></label> </center>
 </div>

这些是我尝试过的css样式，但它们似乎都不起作用：

input[type="radio"]
{
background-color : #5499C7;
}

input[type="radio"] + label
{
background-color : #5499C7;
}

input[type="radio"] +label.blue
{
background-color : #5499C7;
}

input#b1
{
background-color : #5499C7;
}

如果有人能告诉我我失踪了什么，那就太好了。

Answer 1

样式化单选按钮并不困难，但是你需要使用其他元素，很可能是标签，明显的选择，这样你就不需要javascript来处理点击了。它看起来像单选按钮，并且隐藏了单选按钮本身。我在片段中阐述的原则。希望您能够使用您的代码重现它。需要解释CSS还是不言自明？

input {
  position: absolute;
  left: -10000px;
  top: 0;
  height: 0;
  width: 0;
  visibility: hidden;
}
label {
  height: 34px;
  width: 34px;
  border-radius: 17px;
  background-color: whitesmoke;
  border: 1px solid silver;
  position: relative;
  display: block;
}
input:checked + label {
  background-color: #5499C7;
}
input:checked + label:before {
  display: inline-block;
  position: absolute;
  content: '';
  left: 50%;
  top: 50%;
  margin-left: -10px;
  margin-top: -10px;
  background: silver;
  width: 20px;
  height: 20px;
  border-radius: 10px;
}

<input type="checkbox" id="id1"/>
<label for="id1"></label>

Answer 2

input[type="radio"] + label
{
background-color : #5499C7;
height:15px;
width:15px;
display:inline-block;
vertical-align:text-top;
border-radius:50%;
}
input[type="radio"]:checked +label{
  background-color: red;
}

<div class="col-sm-6" id="bcolor"> 
   <center>
     <input type="radio" id="b1" name="toggle" >
     <label class="blue"></label>
   </center>
 </div>

你可以尝试这样的事情。

您的代码中的问题是，您将input[radio]包裹在label标记中，并且您正在CSS中使用兄弟选择器 +不起作用。

JSFiddle：着色单选按钮的颜色不同

2 个答案: