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