Open lulujianglab opened 6 years ago
浏览器自带的checkbox复选框不怎么美观,而且复选框在不同的浏览器上显示的样式又有很大的差异
用一些css代码来自定义checkbox的显示方式,比如框中的√颜色变为绿色
html: <input type="checkbox" id="awesome" /> <label for="awesome"></label> css: input[type="checkbox"]{ -webkit-appearance: none; top: 5px; float: left; position: relative; vertical-align:middle; margin-top:0; background:#fff; border:#dedede solid 1px; border-radius: 3px; min-height: 14px; min-width: 14px; } input[type="checkbox"]:focus { outline: none; } input[type=checkbox]:checked::after{ content: ''; top: 1px; left: 1px; position: absolute; vertical-align: middle; margin-top: 0; background: transparent; border: #85de82 solid 2px; border-top: none; border-right: none; height: 4px; width: 8px; -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }
原理比较简单,通过css的appearance属性去修改css默认样式
appearance是css3的新属性,所有主流浏览器都不支持appearance,所以让chrome支持用-webkit-appearance
-webkit-appearance
appearance:none为去除浏览器默认checkbox样式。然后再通过border、height、width等属性重绘一个灰色边框
去掉input元素获得焦点后的轮廓
然后通过伪元素after来模拟选中状态;::after设置在选中input对象后发生的内容,必须和content属性一起使用;通过绝对定位在之前checkbox里生成一个宽8像素高4像素的绿色边框,然后去掉上边框和右边框,再逆时针旋转45度就可以模拟成√的样式
html: <input type="checkbox" id="awesome" /> <label for="awesome"></label> css: input[type="checkbox"] + label::before { content: ' '; display: inline-block; vertical-align: .2em; width: .8em; height: .8em; margin-right: .2em; border-radius: .2em; background: silver; text-indent: .15em; line-height: .65; } input[type="checkbox"]:checked + label::before { content: '\2713'; color: #85df82; } input[type="checkbox"] { position: absolute; clip: rect(0,0,0,0); }
主要思路:
label的for属性可以关联一个具体的input元素,即使这个input本身不可被用户可见,有个与它对应的label后,我们就可以直接通过和label标签交互来替代原生的input(比如相邻选择符(E+F),伪元素after,before,可以直接利用html的默认checkbox)
一句话概括就是隐藏原生input,样式定义的过程留给label
通过关系选择符选择紧贴在input元素之后的label元素,然后通过before伪元素设置在label对象前的内容样式(这里自定义一个灰色边框,背景白色,通过inline-block定位来并排显示)
然后模拟选中状态,content:‘\2713’是模拟√
然后通过css的clip属性裁剪绝对定位的checkbox元素
html: <input type="checkbox" id="checkbox01" /> <label for="checkbox01"></label> css: /* 隐藏checkbox */ input[type='checkbox'] { display: none; } /* 对label进添加背景图片*/ label { display: inline-block; width: 60px; height: 60px; position: relative; background: url(unchecked.png); background-repeat: no-repeat; } input[type='checkbox']:checked + label { width: 60px; height: 60px; position: relative; background: url(checked.png); background-repeat: no-repeat; }
首先删除掉input元素
然后对label添加背景图片,也就是未选中时呈现的图片
再通过关系选择符选择紧贴在checked状态之后的label元素,再添加一张选中状态的背景图片 (因为label本身是没有点击后被选中的状态的,checkbox被隐藏后,这个状态只能手动模拟)
前言
浏览器自带的checkbox复选框不怎么美观,而且复选框在不同的浏览器上显示的样式又有很大的差异
目的
用一些css代码来自定义checkbox的显示方式,比如框中的√颜色变为绿色
方法
通过appearance去修改css默认样式
原理比较简单,通过css的appearance属性去修改css默认样式
appearance是css3的新属性,所有主流浏览器都不支持appearance,所以让chrome支持用
-webkit-appearance
appearance:none为去除浏览器默认checkbox样式。然后再通过border、height、width等属性重绘一个灰色边框
去掉input元素获得焦点后的轮廓
然后通过伪元素after来模拟选中状态;::after设置在选中input对象后发生的内容,必须和content属性一起使用;通过绝对定位在之前checkbox里生成一个宽8像素高4像素的绿色边框,然后去掉上边框和右边框,再逆时针旋转45度就可以模拟成√的样式
利用label标签的模拟功能
主要思路:
label的for属性可以关联一个具体的input元素,即使这个input本身不可被用户可见,有个与它对应的label后,我们就可以直接通过和label标签交互来替代原生的input(比如相邻选择符(E+F),伪元素after,before,可以直接利用html的默认checkbox)
一句话概括就是隐藏原生input,样式定义的过程留给label
通过关系选择符选择紧贴在input元素之后的label元素,然后通过before伪元素设置在label对象前的内容样式(这里自定义一个灰色边框,背景白色,通过inline-block定位来并排显示)
然后模拟选中状态,content:‘\2713’是模拟√
然后通过css的clip属性裁剪绝对定位的checkbox元素
使用自定义图片来实现checkbox的显示
首先删除掉input元素
然后对label添加背景图片,也就是未选中时呈现的图片
再通过关系选择符选择紧贴在checked状态之后的label元素,再添加一张选中状态的背景图片 (因为label本身是没有点击后被选中的状态的,checkbox被隐藏后,这个状态只能手动模拟)