• 欢迎光临~

css 修改复选框的样式

开发技术 开发技术 2022-12-19 次浏览

效果图:

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;
}

 

程序员灯塔
转载请注明原文链接:css 修改复选框的样式
喜欢 (0)