zoukankan      html  css  js  c++  java
  • 纯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;
         24px;
        cursor: pointer;
        border: 1px solid #fff;
        box-sizing: border-box;
        border-radius: 6px;
        vertical-align: middle;
    }
    input[type="checkbox"]:checked {
        height: 24px;
         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;
         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;
         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;
         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)
     
     
     
     
  • 相关阅读:
    java冒泡排序-选择排序-插入排序-使用API中文文档直接调用函数
    java数组回顾---线性查找最大值最小值---二分查找
    java万年历
    java基础易混点
    progressbar
    TabHost
    ExpandableListView
    AutoCompleteTextView
    GridView
    图像视图-ImageView
  • 原文地址:https://www.cnblogs.com/xiaosuibu/p/6700855.html
Copyright © 2011-2022 走看看