<label><input type="checkbox"><b class="checkbodB"></b>选我</label>
/*样式*/input[type="checkbox"] { display: none; } input[type="checkbox"]+b.checkbodB { display: inline-block; width: 15px; height: 15px; margin-top: -1px; border: 1px solid #ccc; cursor: pointer; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; vertical-align: middle; position: relative; margin-right: 10px; background-color: #ffffff; } input[type="checkbox"]+b.checkbodB:after { content: " "; display: inline-block; position: absolute; width: 9px; height: 5px; top: 3px; left: 2px; border: 2px solid #3399ff; cursor: pointer; border-top: none; border-right: none; background: transparent; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } input[type="checkbox"]:checked+b.checkbodB:after { /*background: #f00; border-color: #f00;*/ opacity: 1; }/*结果*/<label><input type="checkbox"><b>标记1</b></label><label><input type="checkbox"><b>标记2</b></label><label><input type="checkbox"><b>标记3</b></label>
/*样式*/input[type="checkbox"] { display: none; }input[type="checkbox"]+b { display: inline-block; /*width: 74px;*/ padding: 0 20px; border: 1px solid #ddd; cursor: pointer; vertical-align: middle; position: relative; text-align: center; line-height: 30px; font-weight: 400; font-size:12px; color:#666666; margin-right:20px; } input[type="checkbox"]:checked+b { border: 2px solid #3399ff; } input[type="checkbox"]:checked+b:before { content: " "; display: inline-block; width: 0; height: 0; bottom: 0px; right: 0px; position: absolute; border-bottom: 15px solid #3399FF; border-left: 15px solid transparent; } input[type="checkbox"]+b:after { content: " "; display: inline-block; position: absolute; width: 6px; height: 3px; bottom: 3px; right: 2px; border: 1px solid #FFFFFF; cursor: pointer; border-top: none; border-right: none; background: transparent; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } input[type="checkbox"]:checked+b:after { opacity: 1; }/*结果*/
自定义复选框样式
最新推荐文章于 2024-03-20 10:44:35 发布