checkbox样式美化修改复选框样式

忘是亡心i 2023-02-17 11:20 48阅读 0赞

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI3Njc3NjE_size_16_color_FFFFFF_t_70][]
> 
>     input[type="checkbox"] {
>                 width: 20px;
>                 height: 20px;
>                 display: inline-block;
>                 text-align: center;
>                 vertical-align: middle;
>                 line-height: 18px;
>                 position: relative;
>                 -webkit-appearance: none;  //去掉原有样式 
>             }
>             
>             input[type="checkbox"]::before {
>                 content: "";
>                 position: absolute;
>                 top: 0;
>                 left: 0;
>                 background: #fff;
>                 width: 100%;
>                 height: 100%;
>                 border: 1px solid #d9d9d9;
>             }
>             
>             input[type="checkbox"]:checked::before {
>                 content: "\2713";
>                 background-color: #fff;
>                 position: absolute;
>                 top: 0;
>                 left: 0;
>                 width: 100%;
>                 height: 100%;
>                 border: 1px solid #e50232;
>                 color: #e50232;
>                 font-size: 20px;
>                 font-weight: bold;
>             }
> 
> 参考网址：[https://www.cnblogs.com/cloud-k/archive/2018/03/15/8572438.html][https_www.cnblogs.com_cloud-k_archive_2018_03_15_8572438.html]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI3Njc3NjE_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200613182308638.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI3Njc3NjE=,size_16,color_FFFFFF,t_70
[https_www.cnblogs.com_cloud-k_archive_2018_03_15_8572438.html]: https://www.cnblogs.com/cloud-k/archive/2018/03/15/8572438.html