自定义复选框checkbox样式

最新推荐文章于 2024-03-20 10:44:35 发布

转载最新推荐文章于 2024-03-20 10:44:35 发布 · 134 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/nanjie/p/8587881.html

文章标签：

#ui

本文介绍了一种使用HTML和CSS自定义复选框样式的简单方法。通过隐藏默认的复选框并利用label标签和伪元素，可以实现完全自定义的设计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

表单元素中有label 元素和 for属性，当我们点击label 标签时，对应的表单元素就会有所反应。我们就是依据这个特性来实现的自定义的checkbox样式，来直接上代码

<div  class="checkbox">
          <input type="checkbox" id="myCheck">
    	   <label for="myCheck"></label>
</div>

　下面重点来了，css样式

/* 自定义复选框 */
#myCheck{
	display: none;
}
#myCheck + label{
    background-color: #fff;
    border-radius: 50%;
    border:1px solid #d3d3d3;
    width:38px;
    height:38px;
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    line-height: 38px;
}
#myCheck:checked + label{
    background-color: #c30d23;
    color: #fff;
}
#myCheck:checked + label:after{
    content:"\00a0";
    border: 4px solid #fff;
    border-top-width: 0;
    border-right-width: 0; 
    width: 17px;
    height: 12px;
    -webkit-transform: rotate(-50deg);
    position: absolute;
    top:10px;
    left:10px;
}

　　以上一个简单的自定义复选按钮就出来啦，你们直接拿去用就好了

转载于:https://www.cnblogs.com/nanjie/p/8587881.html