纯css实现适配谷歌、火狐的自定义多选框、单选框颜色

共2个文件

png：1个

html：1个

需积分: 21 146 浏览量 2023-01-30 18:26:40 上传评论收藏 4KB RAR 举报

资源推荐

资源详情

资源评论

收起资源包目录

zdy-checkbox-radio.rar （2个子文件）

zdy-checkbox-radio

index.html 2KB

images

icon-checked.png 3KB

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>自定义checkbox、radio颜色</title> <style> label{display:block; cursor: pointer} /*复选框基本（未选中）的样式*/ input[type="checkbox"]{ -webkit-appearance: none; -moz-appearance: none; appearance: none; outline: none; display: inline-block; vertical-align: middle; width: 16px; height: 16px; border-radius: 4px; background-image: url(images/icon-checked.png); background-size: 100% auto; box-sizing:border-box; background-position: 0 0; background-color: white; border:solid 1px #333; } /* 复选框鼠标按下时增加的样式 */ input[type="checkbox"]:active{ background-position: 0 -48px; background-color: #80A231; border: 0; } /*复选框选中后增加的样式*/ input[type="checkbox"]:checked{ background-position: 0 -48px; background-color: #80A231; border: 0; } /*复选框选中后增加的样式*/ input[type="checkbox"]:checked:active{ background-position: 0 -48px; background-color: #80A231; border: 0; } /*单选框基本（未选中）的样式*/ input[type="radio"]{ -webkit-appearance: none; -moz-appearance: none; appearance: none; outline: none; display: block; width: 13px; height: 13px; border-radius: 50%; background-size: 100% auto; box-sizing:border-box; border:solid 1px #80A231; } /*单选按钮选中后增加的样式*/ input[type="radio"]:checked:before{ content:""; display: block; width: 9px; height: 9px; margin: 1px; border-radius: 10px; background-color: #80A231; } </style> </head> <body> <form> <div data-check="check-wrap"> <h2>自定义复选按钮颜色</h2> <label><input type="checkbox" checked="checked">苹果</label> <label><input type="checkbox">石榴</label> </div> <br> <div class="radio-wrap"> <h2>自定义单选按钮颜色</h2> <input type="radio" name="radio"> <input type="radio" name="radio" checked="checked"> <input type="radio" name="radio"> </div> </form> </body> </html>

评论收藏

内容反馈