使用CSS3自定义复选框和单选按钮
使用CSS3自定义复选框和单选按钮
提问于 2013-09-08 15:00:21
这里我有各自风格的复选框和无线电按钮
<h3>Radio buttons</h3>
<div class="radio">
<input id="radio-1" type="radio" name="Data1" value="agree" checked />
<label for="radio-1">Yes</label>
<input id="radio-2" type="radio" name="Data1" value="disagree" />
<label for="radio-2">No</label>
</div>
<h3>Checkboxes</h3>
<div class="checkbox">
<input id="checkbox-1" type="checkbox" name="Data2" value="option1" checked />
<label for="checkbox-1">HTML</label>
<br />
<input id="checkbox-2" type="checkbox" name="Data3" value="option2" />
<label for="checkbox-2">CSS</label>
</div>我想更改上的图像:悬停，我如何做到这一点？
工作演示
回答 2
Stack Overflow用户
发布于 2013-09-08 15:06:04
使用以下代码：
input[type=checkbox] + label:hover:before, input[type=radio] + label:hover:before{
background: url('http://cnt.in.bookmyshow.com/bmsin/SLIMG/1_2.gif?v1');
}是结合两个css伪类- :hover:before实现的效果。
我还从以下位置更改了您的“选定”背景代码：
background: url('http://cnt.in.bookmyshow.com/bmsin/SLIMG/1_4.gif') !important;至
background: url('http://cnt.in.bookmyshow.com/bmsin/SLIMG/1_4.gif');这是为了阻止图标从绿色转向灰色悬停。
在这里，它正在工作：http://jsfiddle.net/tT6tD/1/
Stack Overflow用户
发布于 2014-05-12 07:11:47
尝尝这个
input[type="checkbox"], input[type="radio"] {display: none;}
input[type="checkbox"] + label, input[type="radio"] + label {padding-left: 20px;}
input[type="checkbox"] + label {background: url('http://i.imgur.com/LpSXDFI.png') no-repeat 0 center;}
input[type="radio"] + label {background: url('http://i.imgur.com/YWUFP1H.png') no-repeat 0 center;}
input[type="checkbox"]:checked + label {background: url('http://i.imgur.com/xS4jaLI.png') no-repeat 0 center;}
input[type="checkbox"]:checked + label, input[type="checkbox"]:hover + label {background: url('http://i.imgur.com/xS4jaLI.png') no-repeat 0 center;}
input[type="radio"]:checked + label, input[type="radio"]:hover + label {background: url('http://i.imgur.com/q4VadN4.png') no-repeat 0 center;}http://jsfiddle.net/P8Qrq/4/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/18685151
复制相关文章
相似问题
腾讯云开发者
