自定义type="checkbox" 样式

原创 leechee 随笔 CSS 54阅读 2019-05-16 14:32:43 举报

input[type="checkbox"] {
/去除浏览器默认样式/
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
/自定义样式/
position: relative;
display: inline-block;
vertical-align: top;
width: 16px;
height: 16px;
border: 1px solid #ddd;
outline: none;
background: #fff;
}
input[type="checkbox"]:after {
content: "";
position: absolute;
width: 10px;
height: 10px;
border-radius: 10px;
display: block;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
background: #ffb74c;
-webkit-transform: scale(0);
-moz-transform: scale(0);
transform: scale(0);
/增加一些动画/
-webkit-transition: all ease-in-out 300ms;
-moz-transition: all ease-in-out 300ms;
transition: all ease-in-out 300ms;
}
input[type="checkbox"]:checked:after {
-webkit-transform: scale(1);
-moz-transform: scale(1);
transform: scale(1);
}
input[type="checkbox"] + label {
position: absolute;
top: -7px;
left: 20px;
}

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复