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

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 样式，其中 none 似乎有效：

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 标记中，并且您使用的是 sibling 选择器 + 在 CSS 中不起作用。

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

JSFiddle : Shading radio button a different color

css

background-color

radio-button

jsfiddle