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

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

总结

以上是内存溢出为你收集整理的html – 如何更改收音机和复选框输入的样式全部内容，希望文章能够帮你解决html – 如何更改收音机和复选框输入的样式所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。