使用CSS3自定义复选框和单选按钮

Question

在这里，我使用各自的样式来添加复选框和单选按钮。 HTML:

```html

在这里，我使用各自的样式来添加复选框和单选按钮。

```

<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>

我想在:hover时更改图片，我该如何做呢？

演示效果

- user123456789

Answer 1

请使用以下代码：

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 来实现效果。

我还将你的“selected”背景代码从以下内容进行了更改：

background: url('http://cnt.in.bookmyshow.com/bmsin/SLIMG/1_4.gif') !important;

to

background: url('http://cnt.in.bookmyshow.com/bmsin/SLIMG/1_4.gif');

这是为了防止图标在悬停时从绿色变为灰色。

这里是演示效果：http://jsfiddle.net/tT6tD/1/

- Joe

Answer 2

试试这个

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/

- Anil Tiwari