zoukankan      html  css  js  c++  java
  • 模拟radio单选按钮

    1.页面制作中设计总是会做出好看的单选样式,但是原生radio又太难改变,又想要原生radio的功能

    有时会用div来模拟单选功能,但是自己还是想要原生的radio单选功能

    最好用的方法便是用label标签来模拟,label标签可以绑定radio,这样点击label就像点击radio一样完全不影响radio的原生功能

    html如下:

      <div class="radio-con">
           <input type="radio" name="sex" value="FEMALE" id="female">
            <label for="female" class="radio-label"></label>
     </div>
    

      css上:

    1.使用opacity: 0;来使radio隐藏

    2.虽然看起来隐藏掉了但是位置还是存在的,因此使用的方法是label使用绝对定位脱离文档流,这样就可以假装没有radio的存在,把样式完全写在label上,用js来控制label标签的选中取消状态

    css如下:

    .radio-con{
       position:relative;
    }
    .radio-con .radio-label{
        display: inline-block;
        position: absolute;
        top:0;
        left: 0;
    //任意样式 }

      

  • 相关阅读:
    BD String
    1114
    1083
    1084
    1108
    1087
    1145
    1217
    1164
    反射
  • 原文地址:https://www.cnblogs.com/Anne3/p/7852741.html
Copyright © 2011-2022 走看看