原生input type=checkbox修改原生样式

秋石兰

已于 2023-04-28 11:53:29 修改

阅读量220

点赞数 1

文章标签： css css3 html

于 2023-04-27 09:46:17 首次发布

本文链接：https://blog.csdn.net/m0_71585401/article/details/130399669

版权

原生input type=checkbox修改原生样式

 input[type="checkbox"] {
        -webkit-appearance: none;
        width: 10px;
        height: 10px;
        background: #ffffff00;
        border: #00e0f9 solid 1px;
      }
      input[type="checkbox"]:checked{
        width: 10px;
        height: 10px;
        display: inline-block;
        position: relative;
        background-color: #3cc5b6;
    }
    input[type="checkbox"]:checked:after {
        content: '';
        display: inline-block;
        width: 5px;
        height: 8px;
        border-top: 2px solid #fff;
        border-left: 2px solid #fff;
        background-color: #3cc5b6;
        transform: rotate(230deg);
        position: absolute;
        left: 1.5px;
        top: 0px;
    }