css 修改复选框的样式

效果图:

实现代码如下:

/* 选中input标签类型为复选框的 */
input[type="checkbox"] {
   width: 16px;
   height: 16px;
   vertical-align: middle;
   -webkit-appearance: none;
   /*清除默认样式*/
   border: 1px solid #D1D1D1;
   border-radius: 3px
}

/* 点击选中时 */
input[type="checkbox"]:checked {
   background: url("https://pic.imgdb.cn/item/63a01ca8b1fccdcd365fc380.png") no-repeat center center;
   background-size: 20px;
}

 

posted @ 2022-12-19 16:21  __fairy  阅读(400)  评论(0编辑  收藏  举报