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

发布时间：2020-12-14 22:51:53 所属栏目：资源来源：网络整理

导读：这里我有各自样式的复选框和单选按钮 HTML 我想改变图像：悬停,我该怎么做 Working demo 最佳答案使用此代码： input[type=checkbox] + label:hover:before,input[type=radio] + label:hover:before{ background: url('http://cnt.in.bookmyshow.com/bmsin/

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

HTML


我想改变图像：悬停,我该怎么做
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/
                        （编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!