簡(jiǎn)介
網(wǎng)頁(yè)上常見的種種UI效果我們經(jīng)常感覺太漂亮了。接下來的幾天我們會(huì)一直來使用CSS3來制作一些常見的UI效果，來改變?yōu)g覽器默認(rèn)UI效果。請(qǐng)大家持續(xù)關(guān)注。今天我們要分享的是關(guān)于瀏覽器的表單元素中最讓人頭疼的單選和復(fù)選框的效果最欠。同樣的會(huì)貼上視頻示罗。
常見的網(wǎng)頁(yè)UI效果
案例效果
技巧說明
使用CSS3偽類：checked :before :disabled來進(jìn)行制作惩猫，同樣的要取消掉瀏覽器的默認(rèn)效果，使用-webkit-appearance: none來去掉蚜点，為了看到更好的效果我們使用iconfont轧房。詳細(xì)效果請(qǐng)參見視頻：
代碼：
<!DOCTYPE html><html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="css/iconfont.css" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<style>
input[type="checkbox"],
input[type="radio"] {
font-family: "iconfont" !important;
font-size: 25px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
}
input[type="checkbox"],input[type="radio"] {
width: 30px;
height: 30px;
outline: none;
-webkit-appearance: none;
}
input[type="checkbox"]:before {
content: "\e720";
display: block;
width: 100%;
height: 100%;
color: rgb(200,200,200);
}
input[type="checkbox"]:checked:before {
content: "\e722";
display: block;
width: 100%;
height: 100%;
color: dodgerblue;
}
input[type="checkbox"]:disabled:before {
content: "\e720";
display: block;
width: 100%;
height: 100%;
color: #efefef;
}
input[type="radio"]:before {
content: "\e72f";
display: block;
width: 100%;
height: 100%;
color: rgb(200,200,200);
}
input[type="radio"]:checked:before {
content: "\e71f";
display: block;
width: 100%;
height: 100%;
color: dodgerblue;
}
input[type="radio"]:disabled:before {
content: "\e72f";
display: block;
width: 100%;
height: 100%;
color: #efefef;
}
</style>
</head>
<body>
<div>
<input type="checkbox" name="aa" checked="checked" />
</div>
<div>
<input type="checkbox" name="bb" />
</div>
<div>
<input type="checkbox" name="cc" disabled="disabled" />
</div>
<div>
<input type="radio" name="sex" checked="checked" />
</div>
<div>
<input type="radio" name="sex" />
</div>
<div>
<input type="radio" name="sex" disabled="disabled" />
</div>
</body>
</html>
