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

Question

这里我有各自样式的复选框和单选按钮

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>

我想改变图像:悬停,我该怎么做

工作演示

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来达到效果。

我还更改了您的“选定”背景代码：

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/