纯css兼容个浏览器input[type='radio']不能自定义样式

Posted 小碎步

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了纯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']不能自定义样式的主要内容,如果未能解决你的问题,请参考以下文章

css-input[type='file']光标效果

input type='tel' VS type='number'

使用 jQuery,如何确定浏览器是不是原生支持 CSS 选择器“input[type=text]”?

input[type='file']样式美化及实现图片预览

css去掉浏览器默认样式

css样式问题,为啥把form表单放进table的td里面,input type='submit'会自动换行啊?如何才可以不换行?