最近在做微信小程序,因为这个东西用的是自己的样式,也不支持BOM,所以有些东西用以前做浏览器前端的经验来看不太好弄,必须另辟捷径。
今天在做一个小程序项目,需要自定义checkbox
复选框,自定义边框和内部对号样式,结合在网上搜到的东西以及自己理解,总算是做出来了。
这里主要是利用css3的伪类。
废话不多话,以下是源码实现。
html结构大概是这样的:
<label id="labelId" for="regular">
<checkbox id="regular"/>
</label>
css代码是这样的:
#labelId{
width:30px;
height:30px;
border-radius:4px;
background-color: rgb(0,150,136);
position: relative;
}
#labelId:after {
content: '\00a0';
display: inline-block;
border: 4px solid #fff;
border-top-width: 0;
border-right-width: 0;
width: 18px;
height: 10px;
-webkit-transform: rotate(-50deg);
position: absolute;
top:6px;
left:4px;
}
效果如下:
选中前和选中后:
第二种
HTML:
<input type="checkbox" id="awesome">
<label for="awesome">Awesome!</label>
CSS:
input[type='checkbox']+label::before {
content:'\a0';/*不换行空格*/
display: inline-block;
vertical-align: 0.2em;
width:0.8em;
height:0.8em;
margin-right: .2em;
border-radius:.2em;
background: silver;/*复选框的背景色*/
text-indent:0.15em;
line-height: 0.65;
}
input[type='checkbox'] {
/*隐藏掉原先实际的 checkbox 框,之所以没用 display:none; 这种简单直接的方式,是因为这种方法会把它从键盘 tab 键切换焦点的队列中完全删除*/
position: absolute;
clip:rect(0,0,0,0);
}
input[type='checkbox']:checked+label::before {
content:'\2713'; /*对号的 Unicode字符*/
background: yellowgreen;/*对号的颜色*/
}
效果如下: