純CSS自定義checkbox對號
阿新 • • 發佈:2019-02-09
最近在做微信小程式,因為這個東西用的是自己的樣式,也不支援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: 10 px;
-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;/*對號的顏色*/
}
效果如下: