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

前端之家收集整理的这篇文章主要介绍了html – 使用CSS3自定义复选框和单选按钮前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

HTML

dio buttonsdio">
  dio-1" type="radio" name="Data1" value="agree" checked />
  

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

Working demo

最佳答案
使用此代码

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:之前实现的效果.

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

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/

猜你在找的HTML相关文章