之前总是匆匆看过,如今终于知道该怎么搞了。。。

**利用label挂钩checkbox的特点来实现。
当html代码中,label的for属性值和checkbox的id值一样的时候,label就可以控制checkbox的选择了。
为label的伪元素添加背景图片,覆盖真正的checkbox对象,这样,既有图片的美观效果,又有checkbox一切的交互行为。
这里使用了定位,不然不能覆盖原始的复选框。而且文字和图片之间要间隔,文字也需要设置为定位对象。总之,这里都是定位关系。**

设计一个图片如下,默认状态,点击状态,不可用状态。

input[type=checkbox]+label:before{
    content:"";
    position:absolute;
    width:20px;
    height:20px;
    background:url(images/btn1.png) no-repeat;
    }
input[type=checkbox]:checked+label:before{
    background-position:-28px 0;}
input[type=checkbox]+label span{
    font-size:14px;
    position:absolute;
    left:30px;}

#check{     position:relative;}//对父元素坐定位,使下面对父元素为起点

结构是

此处内容需要评论回复后方可阅读。

版权属于:染念
作品采用:本作品采用 知识共享署名-相同方式共享 4.0 国际许可协议 进行许可。
更新于: 2020年02月08日 20:09
0


183 文章数
695 评论量
4 分类数
186 页面数
已在风雨中度过 7年246天7小时2分
目录
来自 《表单单选框,多选框美化》
© 2024 染念的笔记
浙ICP备19020194号-1
暗黑模式
暗黑模式
评论
返回顶部
© 2024 染念的笔记
浙ICP备19020194号-1
暗黑模式
暗黑模式
评论
返回顶部