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

参见英文答案 > Styling input radio with css 5个
我有一个网站,我正在尝试更改单选按钮点的背景颜色.现在它似乎是透明的,所以它获得了背景的颜色.我尝试使用CSS并设置“background：white;”例如,这对浏览器没有影响.有任何想法用于实现这一点的酷炫技巧吗？

同样的问题代表复选框.

解决方法

jsBin demo

此技术使用绑定到隐藏输入元素的label元素,接收：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>

原文地址：https://www.jb51.cc/html/223859.html