zoukankan      html  css  js  c++  java
  • 自定义radio样式

    html结构:

      <span class="form-checkbox-label">是否缴纳社保:&nbsp;&nbsp;</span>
      <span>
         <input type="radio" class="input_check" id="check1" name="sex" />
         <label for="check1"></label>
      </span>
      <label for="check1">是</label>
      <span>
         <input type="radio" class="input_check" id="check2" name="sex" />
         <label for="check2"></label>
      </span>
      <label for="check2">否</label>
    

    css样式:

        /* radio自定义样式 */
        #check span { 
    position: relative; 
    }
        #check .input_check {
    position: absolute;
     14px;
    height: 14px;
    visibility: hidden;
    }
        #check .input_check+label {
    vertical-align: middle; 
    display: inline-block;
     15px;
    height: 15px;
    border: 1px solid #bfbfbf;
    border-radius: 50%;
    padding: 3px;
    background-clip: content-box;
    }
       #check .input_check:checked+label {
        background-clip: content-box;
    }
    #check1, #check2{
    vertical-align: middle;
    }
    

    结果:

  • 相关阅读:
    4.12作业
    4.9上机作业
    第十周上级作业
    第九周上机作业
    第八周作业
    第八周上机作业
    第七周作业
    第七周上机练习
    第六周作业
    4.9上机练习
  • 原文地址:https://www.cnblogs.com/shemingxin/p/12614103.html
Copyright © 2011-2022 走看看