難題
CSS最初出現(xiàn)時(shí)务唐，對(duì)表單元素的樣式控制力有限。不過(guò)近年來(lái)又兵，各種瀏覽器逐步放開(kāi)CSS屬性對(duì)變單控件的作用范圍任柜。從而設(shè)置大多數(shù)表單控件的樣。
不過(guò)單選框和復(fù)選框不在此例沛厨，這兩個(gè)控件絕大多數(shù)瀏覽器無(wú)法設(shè)置樣式宙地。
解決方案
通過(guò)label 標(biāo)簽的：before偽元素實(shí)現(xiàn)。
當(dāng)<label>元素與復(fù)選框關(guān)聯(lián)后逆皮，點(diǎn)擊label標(biāo)簽同樣能觸發(fā)事件宅粥。
通過(guò)對(duì)偽元素的美化實(shí)現(xiàn)復(fù)選框。
1.HTML代碼如下
<input id="checkbox1" type="checkbox" value="1"/>
<label for="checkbox1"> 測(cè)試 </label>
2.美化偽元素代碼如下
input[type="checkbox"] + label::before{
content: '\a0'; /* 不換行空格*/
display:inline-block;
vertical-align: -1px;
width: 15px;
height:15px;
margin-right:5px;
border-radius: 3px;
background: silver;
text-indent: 2px;
line-height:16px;
}
初始.jpeg
3.設(shè)置選中狀態(tài)
input[type="checkbox"]:checked + label::before{
content:'\2713';
background: yellowgreen;
}
4.將復(fù)選框 隱藏起來(lái)电谣。不能設(shè)置 display:none ,會(huì)將它從tab鍵切換焦點(diǎn)的隊(duì)列中刪除秽梅。
代碼如下
input[type="checkbox"] {
position: absolute;
clip: rect(0,0,0,0);
}
5.設(shè)置獲取焦點(diǎn)和禁用狀態(tài)樣式
input[type="checkbox"]:focus + label::before{
box-shadow:0 0 2px 2px #58a;
}
input[type="checkbox"]:disabled + label::before{
background: gray;
box-shadow:none;
color:#555;
}
這樣就完成了checkbox的美化抹蚀。
最終樣式如下：
默認(rèn).jpg
選中.jpg
獲取焦點(diǎn).jpg
這樣就完成了checkbox的美化。
可以通過(guò)類(lèi)似的設(shè)置創(chuàng)建一個(gè)開(kāi)關(guān)按鈕企垦。（checkbox隱藏,修改label樣式）
html
<input id="switch" type="checkbox" class="switch">
<label for="switch">提交<label/>
CSS
<style>
input[class="switch"] {
position:absolute;
clip: rect(0,0,0,0);
}
input[class="switch"]+ label {
width:65px;
display: inline-block;
background:#ccc;
background: linear-gradient(#ddd,#bbb);
border: 1px solid rgba(0,0,0, 0.1);
border-radius:5px;
text-align: center;
text-shadow: 0 1px 1px white
}
input[class="switch"]:checked+ label,
input[class="switch"]:active+ label {
box-shadow: 1px 1px 1px rgba(0,0,0,0.3) inset;
border-color:rgba(0,0,0,0.4);
background: #bbb;
}
</style>
效果圖：
switch.jpg
switch-click.jpg
