重置 radio 和 checkbox 的样式
样式 重置 checkbox radio
2023-09-11 14:15:30 时间
代码:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>选择框样式</title> <style> label { font-size: 12px; cursor: pointer; } label i { font-size: 12px; font-style: normal; display: inline-block; width: 12px; height: 12px; text-align: center; line-height: 12px; color: #fff; vertical-align: middle; margin: -2px 2px 1px 0px; border: #2489c5 1px solid; } input[type="checkbox"], input[type="radio"] { display: none; } input[type="radio"]+ i { border-radius: 7px; } input[type="checkbox"]:checked+ i, input[type="radio"]:checked+ i { background: #2489c5; } input[type="checkbox"]:disabled+ i, input[type="radio"]:disabled+ i { border-color: #ccc; } input[type="checkbox"]:checked:disabled+ i, input[type="radio"]:checked:disabled+ i { background: #ccc; } </style> </head> <body> <label><input type="checkbox"><i>✓</i>复选框</label><br> <label><input type="checkbox" checked><i>✓</i>复选框</label><br> <label><input type="checkbox" disabled><i>✓</i>复选框禁用</label><br> <label><input type="checkbox" disabled checked><i>✓</i>复选框禁用已选</label><br> <label><input type="radio" name="abc"><i>✓</i>单选框</label><br> <label><input type="radio" name="abc" checked><i>✓</i>单选框</label><br> <label><input type="radio" name="abc" disabled><i>✓</i>单选框禁用</label><br> <label><input type="radio" name="def" disabled checked><i>✓</i>单选框禁用已选</label><br> </body> </html>
效果:
相关文章
- select样式美化(简单实用)
- datagrid单元格格式化样式化
- el-tooltip 自定义样式
- 微信小程序:在父组件中修改子组件的样式
- 获取input type=file的文件名及input type=file获取文件名的浏览器,设置input type=file样式
- css样式重置样式
- 四个好看的CSS样式表格
- 自定义单选框radio样式
- NPOI 生成Excel (单元格合并、设置单元格样式:字段,颜色、设置单元格为下拉框并限制输入值、设置单元格只能输入数字等)
- Winform自定义窗体样式,实现标题栏可灵活自定义
- Java实现一行代码生成二维码,可传输到前端展示,可自定义二维码样式,可设置图片格式,可对二维码添加图片,可对二维码添加文字,可以设置二维码大小、字体大小、字体颜色、边框颜色、边框大小等等
- 前端 布局 搜索样式 html