用css样式使checkbox复选框变为圆角

最新推荐文章于 2024-08-21 12:07:29 发布

置顶 Leader755

最新推荐文章于 2024-08-21 12:07:29 发布

阅读量4.3w

点赞数 21

文章标签： checkbox复选框 checkbox圆角 checkbox复选框圆角 checkbox变圆

本文链接：https://blog.csdn.net/weixin_41316842/article/details/80398239

版权

1.当你们看到这篇文章时，想必你已经发现了如果想改变checkbox的样式变成圆角，通过以往的css在checkbox下添加border-radius=50%;是实现不了的。

 <input type="checkbox">

input[type="checkbox"]{
    width: 20px;
    height: 20px;
    border: 1px solid #000;
    border-radius: 50%;
}

/*无法实现*/

2.所以接下来就用css样式实现

<!-- html -->
<span>
       <input type="checkbox"class="Checkbox" id="check1">
       <label for="check1"></label>
</span>

span {
    position: relative;
}
.Checkbox {
    position: absolute;
    visibility: hidden;
}
.Checkbox+label {
    position:absolute;
    width: 16px;
    height: 16px;
    border: 1px solid #A6A6A6;
    border-radius: 50%;
    background-color:#DEDEDE;
} 
.Checkbox:checked+label:after {
    content: "";
    position: absolute;
    left: 2px;
    top:2px;
    width: 9px;
    height: 4px;
    border: 2px solid #424242;
    border-top-color: transparent;
    border-right-color: transparent; 
    transform: rotate(-45deg);
    -ms-transform: rotate(-60deg);
    -moz-transform: rotate(-60deg);
    -webkit-transform: rotate(-60deg);
}

2.效果查看演示

 
  <a title="查看演示效果" href=" 
  https://leader755.github.io/checkbox-fillter/ 
  " target="_blank" >点我查看演示效果</a> 
 
  <a title="下载源码" href=" 
  https://github.com/Leader755/checkbox-fillter.git 
  " target="_blank">点我下载源码</a>