checkbox CSS重写
作者:
fronter | 来源:发表于
2019-03-02 10:07 被阅读0次<style>
.week-checkbox {
display: none;
}
.wcheckbox_label:before {
content: "";
display: inline-block;
vertical-align: middle;
width: 20px;
height: 20px;
background-image: url(imgs/unchecked.png);
background-size: 100%;
}
.week-checkbox:checked+.wcheckbox_label:before {
background-image: url(imgs/checked.png);
}
/**
* 单选框自定义样式
**/
input[type=radio]{
/*去除浏览器默认样式*/
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
/*自定义样式*/
position: relative;
display: inline-block;
vertical-align: top;
width: 20px;
height: 20px;
border: 1px solid #00bfff;
outline: none;
cursor: pointer;
/*设置为圆形，看起来是个单选框*/
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
/**
* 单选框 选中之后的样式
**/
input[type=radio]:after{
content: '';
position: absolute;
width: 12px;
height: 12px;
display: block;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
background: #00bfff;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-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=radio]:checked:after{
-webkit-transform: scale(1);
-moz-transform: scale(1);
transform: scale(1);
}
</style>
<body>
<p>
<input type="checkbox" class="week-checkbox" id="wo0">
<label class="wcheckbox_label" for="wo0">ONE</label>
<input type="checkbox" class="week-checkbox" id="wo1">
<label class="wcheckbox_label" for="wo1">TWO</label>
<input id="open" name="swicth" type="radio" value="" />
</p>
</body>
本文标题：checkbox CSS重写
本文链接：https://www.haomeiwen.com/subject/leteuqtx.html
网友评论