css3修改美化radio、checkbox的默认样式的简单方案
发表于:2024-10-10 18:28:00浏览:904次
现在前端页面效果要求特别高,页面中表单的默认input组件样式显然不能满足广大用户的体验需求,之前在开发开发项目中刚好有相关的需求,在此特地整理下修改radio、CheckBox样式的方法。
具体原理:是使用原生的checkbox或input标签,在其后面设置相关联的label元素。给input元素设置为透明,然后通过定位让用户看到的是
利用css3伪元素实现样式修改,先看效果图。
具体HTML代码如下:
<div class="mbui-form">
<label class="mbui-form-label">工作类型</label>
<div class="mbui-form-radio">
<input class="mbui-input-radio" type="radio" name="labor_type" id="labor_radio1" />
<label for="labor_radio1">案头工作</label>
<input class="mbui-input-radio" type="radio" name="labor_type" id="labor_radio2" />
<label for="labor_radio2">外勤工作</label>
</div>
</div>
<div class="mbui-form">
<label class="mbui-form-label">工作类型</label>
<div class="mbui-form-checkbox">
<input class="mbui-input-checkbox" type="checkbox" name="labor_types" id="labor_checkbox1" />
<label for="labor_checkbox1">外勤工作</label>
<input class="mbui-input-checkbox" type="checkbox" name="labor_types" id="labor_checkbox2" />
<label for="labor_checkbox2">外勤工作</label>
</div>
</div>
具体CSS代码如下:
/*radio*/
.mbui-form-radio {
width: 100%;
border: 0;
font-size: 16px;
color: #212121;
padding: 14px 12px 14px 120px;
background: #FFF;
line-height: 1.4
}
.mbui-form-radio .mbui-input-radio {
width: 19px;
height: 19px;
appearance: none;
position: relative;
}
.mbui-form-radio .mbui-input-radio:before {
content: '';
width: 19px;
height: 19px;
border: 1px solid #888888;
display: inline-block;
border-radius: 50%;
vertical-align: bottom;
}
.mbui-form-radio .mbui-input-radio:checked:before {
content: '';
width: 19px;
height: 19px;
border: 1px solid #267EF0;
background: #267EF0;
display: inline-block;
border-radius: 50%;
vertical-align: bottom;
}
.mbui-form-radio .mbui-input-radio:checked:after {
content: '';
width: 10px;
height: 5px;
border: 2px solid white;
border-top: transparent;
border-right: transparent;
text-align: center;
display: block;
position: absolute;
top: 6px;
left: 5px;
vertical-align: bottom;
transform: rotate(-45deg);
}
.mbui-form-radio .mbui-input-radio+label {
line-height: 19px;
display: inline-block;
margin-left: 5px;
margin-right: 15px;
color: #666;
}
/*checkbox*/
.mbui-form-checkbox {
width: 100%;
border: 0;
font-size: 16px;
color: #212121;
padding: 14px 12px 14px 120px;
background: #FFF;
line-height: 1.4
}
.mbui-form-checkbox .mbui-input-checkbox {
width: 19px;
height: 19px;
appearance: none;
position: relative;
}
.mbui-form-checkbox .mbui-input-checkbox:before {
content: '';
width: 19px;
height: 19px;
border: 1px solid #888888;
display: inline-block;
border-radius: 3px;
vertical-align: bottom;
}
.mbui-form-checkbox .mbui-input-checkbox:checked:before {
content: '';
width: 19px;
height: 19px;
border: 1px solid #267EF0;
background: #267EF0;
display: inline-block;
border-radius: 3px;
vertical-align: bottom;
}
.mbui-form-checkbox .mbui-input-checkbox:checked:after {
content: '';
width: 10px;
height: 5px;
border: 2px solid white;
border-top: transparent;
border-right: transparent;
text-align: center;
display: block;
position: absolute;
top: 6px;
left: 5px;
vertical-align: middle;
transform: rotate(-45deg);
}
.mbui-form-checkbox .mbui-input-checkbox+label {
line-height: 19px;
display: inline-block;
margin-left: 5px;
margin-right: 15px;
color: #666;
}
该方案充分借助了CSS3的优势,无需使用js和图片,仅用纯CSS3就可以实现对radio、checkbox的美化。
推荐文章
- PHP对手机浏览器,微信浏览器,企业微信浏览器的判断方法
- ref, toRef, toRefs,reactive, defineComponent, computed, unref, toRaw, watchEffect, onUpdated 10个VUE3前端API总结
- ThinkPHP6+JS实现大文件分片上传,切片上传
- 字符编码Unicode新增五个新的行星符号
- 开源免费的个人博客软件,勾股BLOG2.0发布
- linux环境下,Composer安装项目时报错:Do not run Composer as root/super user!
- 8个项目必备的JavaScript代码片段,建议加入到项目中
- 企业OA系统开发一般需要多久?开发费用怎样?
- 新一代的CRM系统的操作权限和数据权限的设计
- 微软发布首个 Windows 11 ISO 版本 新的浏览器大战又要开始?