<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重写
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- 最终的效果图 image.png 使用到的方法 :before 伪元素，html 转义字符 参考地址 less 源...
