在網頁設計中由於無法設置input框的樣式很多時候會使用圖片代替，今天在《css揭秘》一書中看到關於input樣式框的修改，感覺很有啟發，所以提供給廣大開發者，希望有所幫助。
具體思路使用一個label標簽來將input復選框給遮蓋住，同時使用input的checked屬性實現樣式變換。
input原本樣式
修改后的樣式
css代碼
body {
background:#a8bfcf;
}
.cricle {
margin-top: 20px;
}
input+.las:before {
display: inline-block;
margin-right: 5px;
content: "\a0"; /*不換行空格*/
width: 1em;
height: 1em;
background:linear-gradient(#2467b5,#5e90d7);
border-radius: .25em;
border:.125em solid white;
text-indent: .08em;
line-height: 1em;
box-shadow: .08em .08em .08em rgba(0,0,0,.4),.08em .1em .08em rgba(0,0,0,.4) inset;
font-size: 24px;
vertical-align: middle;
outline-offset: -10px;
}
input:checked+.las:before{
content:"\2713";
background:linear-gradient(#2467b5,#5e90d7);
color: white;
font-weight: bold;
box-shadow: .08em .08em .08em rgba(0,0,0,.4),.08em .1em .08em rgba(0,0,0,.4) inset;
}
input+.lasC:before{
border-radius: 50%;
}
input:checked+.lasC:before{
content: "·";
text-indent: 0;
text-shadow: 2px 0 2px white,0 2px 2px white, 0 -2px 2px white, -2px 0 2px white; /*由於點太小擴大陰影使其變大*/
}
input {
position: absolute;
clip: rect(0,0,0,0);
}
html代碼
<div>
<input type="checkbox" id="awesome4" />
<label class="las" for="awesome4">Awesome!</label>
<input type="checkbox" id="awesome5" />
<label class="las" for="awesome5">Awesome2!</label>
<input type="checkbox" id="awesome6" />
<label class="las" for="awesome6">Awesome3!</label>
</div>
<div class="cricle">
<input type="checkbox" id="awesome" />
<label class="las lasC" for="awesome">Awesome!</label>
<input type="checkbox" id="awesome2" />
<label class="las lasC" for="awesome2">Awesome2!</label>
<input type="checkbox" id="awesome3" />
<label class="las lasC" for="awesome3">Awesome3!</label>
</div>