首页 > 代码库 > 纯css兼容个浏览器input[type='radio']不能自定义样式
纯css兼容个浏览器input[type='radio']不能自定义样式
各个浏览器对于表单input[type=‘radio‘]、input[type=‘checkbox‘]的样式总是各有差异
//html
<div class="remember-account">
<input type="checkbox">
<span>记住账号</span>
</div>
//css
.remember-account {
display: inline-block;
font-size: 18px;
color: #fff;
float: left;
margin-left: 26px;
}
.remember-account input[type="checkbox"] {
-webkit-appearance: none;
outline: none;
border: none;
background-color: transparent;
box-sizing: border-box;
height: 24px;
width: 24px;
cursor: pointer;
border: 1px solid #fff;
box-sizing: border-box;
border-radius: 6px;
vertical-align: middle;
}
input[type="checkbox"]:checked {
height: 24px;
width: 24px;
background-image: url(../images/login/pick.png);
background-repeat: no-repeat;
background-position: 0 0;
vertical-align: middle;
border: none;
}
.remember-account span{
display: inline-block;
}
//没有选择 和 勾选（checked ）后 : 效果
火狐（Firefox）：
chrome、opera：
对input设置width：24px;height:24px;火狐没有任何效果；说明火狐上不支持input样式的自定义
下面进行兼容性（完全css，不用一点js），多说上代码：
//html
<div class="remember-account">
<input type="checkbox">
<div class="sub-checkbox"></div>
<span>记住账号</span>
</div>
//css
//增加的样式代码，用/**/注释出来；可对比
.remember-account {
position: relative; /*父层*/
display: inline-block;
font-size: 18px;
color: #fff;
float: left;
margin-left: 26px;
}
.remember-account input[type="checkbox"] {
position: absolute; /*input,相对定位*/
-webkit-appearance: none;
outline: none;
border: none;
background-color: transparent;
box-sizing: border-box;
height: 24px;
width: 24px;
cursor: pointer;
border: 1px solid #fff;
box-sizing: border-box;
border-radius: 6px;
vertical-align: middle;
opacity: 0; /*透明度为0，隐藏掉input*/
z-index: 2; /* 比input下面的div,z-index:1大，层叠在最上面，点击时候能点击到input */
}
/*用div模拟input的样式*/
.sub-checkbox{
display: inline-block;
position: absolute; /*input下面的div,相对定位*/
-webkit-appearance: none;
outline: none;
border: none;
background-color: transparent;
box-sizing: border-box;
height: 24px;
width: 24px;
cursor: pointer;
border: 1px solid #fff;
box-sizing: border-box;
border-radius: 6px;
vertical-align: middle;
z-index: 1;/* 比input的z-index:2小，层叠在下面面 */
}
/*!!利用伪类的写法+；input选中后，下面的div的样式*/
input[type="checkbox"]:checked + div {
height: 24px;
width: 24px;
background-image: url(../images/login/pick.png);
background-repeat: no-repeat;
background-position: 0 0;
vertical-align: middle;
border: none;
}
.remember-account span{
display: inline-block;
margin-left: 30px;/*因为input和它下面的div都相对定位脱离了文本流，所以不给距离，文字会层叠过去*/
}
//兼容后的效果
火狐（Firefox）、chrome、opera:
//在控制台上检测一下是否选择了（checked）
纯css兼容个浏览器input[type='radio']不能自定义样式
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。