zoukankan      html  css  js  c++  java
  • 改变input tpye 属性radio css 样式!!!

    // html部分
    <div class="Report_for_right">
    <input type="radio" name="Report_radio">
    <label></label>
    </div>
    //css
    .Report_for_right{
    float: right;
    position: relative;
    input{
    z-index: 100;
    }
    input[type="radio"] {
    /* 40px;*/
    // 这里把默认的圆点透明度设置为0,并且把 label 标签的层级设置成高于默认的radio层级
    opacity: 0;
    z-index: 100!important;
    height: 20px;
    }
    label {
    position: absolute;
    right: 10px;
    top:12px;
    border: 1px solid #ddd;
    15px;
    height: 15px;
    text-align: center;
    // 点击显示成绿色部分,其实是radio的部分,只不过对radio进行了透明处理而已。
    z-index:1;
    /**/
    border-radius: 50px;
    color: #333;
    }
    input:checked+label {
    background-color: #ff6160;
    border-radius: 50px;
    color: white;
    }
    }




    注释:如有错误!请留言

  • 相关阅读:
    dd是___元素
    【电商8】footer mod_service
    外边距塌陷问题
    隐藏display: ____;
    判断一个32位的整数的二进制有几个1
    8 switch case
    键盘录入
    两个整数的交换
    运算符
    java 异常报错总结
  • 原文地址:https://www.cnblogs.com/Liu-yz/p/10820280.html
Copyright © 2011-2022 走看看