如何更改收音机和复选框输入的样式

Question

我有一个网站,我正在尝试更改单选按钮点的背景颜色.现在它似乎是透明的,所以它获得了背景的颜色.我尝试使用CSS和设置"background: white;"例如,但这在浏览器中没有任何影响.有什么想法可以用来达到这个目的吗？

同样的问题代表复选框.

Answer 1

jsBin演示

此技术使用label绑定到隐藏input元素的元素,接收:checked状态将更改:before伪元素的外观:

/* COMMON RADIO AND CHECKBOX STYLES  */
input[type=radio],
input[type=checkbox]{
  /* Hide original inputs */
  visibility: hidden;
  position: absolute;
}
input[type=radio] + label:before,
input[type=checkbox] + label:before{
  height:12px;
  width:12px;
  margin-right: 2px;
  content: " ";
  display:inline-block;
  vertical-align: baseline;
  border:1px solid #777;
}
input[type=radio]:checked + label:before,
input[type=checkbox]:checked + label:before{
  background:gold;
}

/* CUSTOM RADIO AND CHECKBOX STYLES */
input[type=radio] + label:before{
  border-radius:50%;
}
input[type=checkbox] + label:before{
  border-radius:2px;
}

<input type="radio" name="r" id="r1"><label for="r1">Radio 1</label>
<input type="radio" name="r" id="r2"><label for="r2">Radio 2</label>

<input type="checkbox" name="c1" id="c1"><label for="c1">Check 1</label>
<input type="checkbox" name="c2" id="c2"><label for="c2">check 2</label>  

Answer 2

已经很好地确定您无法更改浏览器生成的控件的每个细节.例如,选择下拉列表中的箭头颜色,或收音机的点等等......

你可以创建自定义控件,使用像JQuery UI这样的库,或者....也许可以用css玩一下.

这是一个使用:before伪元素伪造收音机上的彩色圆点的实验:

http://jsfiddle.net/bvtngh57/

input[type="radio"]:checked:before {
    content: "";
    display: block;
    position: relative;
    top: 3px;
    left: 3px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: red;
}

结果: