修改复选框默认的样式

最新推荐文章于 2024-01-29 08:19:11 发布

加点甜

最新推荐文章于 2024-01-29 08:19:11 发布

阅读量1.1k

点赞数

文章标签： css html

(´▽`)ﾉ

本文链接：https://blog.csdn.net/w1311004532/article/details/123581299

版权

复选框的默认样式是修改无效的，可以曲线救国，设置复选框的伪元素，修改伪元素的样式！

  input[type=checkbox]{
    position: relative;
    margin-right: 10px;
  }

  input[type=checkbox]::after{
    position: absolute;
    top: 0;
    background-color:white;
    border: 1px solid #bababa;
    width:1rem;
    height: 1rem;
    display: inline-block;
    visibility: visible;
    text-align: center;
    content: ' ';
    border-radius: 3px
  }

  input[type=checkbox]:checked::after{
    background: #007bff url('data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%278%27 height=%278%27 viewBox=%270 0 8 8%27%3e%3cpath fill=%27%23fff%27 d=%27M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z%27/%3e%3c/svg%3e') center no-repeat;
    content: "";
    border: none;
  }

效果：