css自定义checkbox

来源：互联网发布：怎么样找淘宝客户编辑：程序博客网时间：2024/06/03 17:25

效果展示：

代码：
<body>
<label for="mybtn">
<input id="mybtn" class="mybtn" type="checkbox"><b></b>全选</input>
</label>
<body>
<style>
/自定义样式的checkbox/
label {
display: block;
height:100% !important;
padding:0 !important;
margin:3px!important;
}
/旧按钮处理/
input {
visibility: hidden; /隐藏掉默认样式的checkbox,但仍然保留占有空间 /
display: none; /隐藏并销毁占有空间/
}
/新按钮样式/
b{
cursor:pointer;
display:inline-block; /行内显示，并且可以撑起空间/
width:20px;height:20px; /大小/
border: solid 1px #ccc !important; /边框样式/
border-radius:10px; /圆角/

vertical-align:middle; /*水平居中*/
margin:5px;
}
/制作对号 /
b:after{
opacity:0; /透明度 /
content:'';
position:absolute;
width:13px;height:7px; /大小/
background:transparent; /方块填充色/
top:24px;left:12px; /定位/
border:2px solid white; /边框效果/
border-top:none;border-right:none; /生成对号/
transform:rotate(-45deg) scale(0); /* 旋转缩放 /
transition: all 0.3s; /动画延时/
}
/新按钮点击时样式/
input:checked+b{
background-color:rgb(76, 216, 100);
}
/点击时对号效果*/
input:checked+b:after{
transform:rotate(-45deg) scale(1);
opacity:1;
}
</style>
参考原文：http://www.360doc.com/content/15/0528/11/1355383_473823407.shtml

阅读全文

0 0