• 通过CSS3伪类,美化Radio按钮样式


    CSS3样式:

    /* RADIO */
    .button-holder {
      100%;
    }
    .regular-radio {
     display: none;
    }
    .regular-radio + label {
     -webkit-appearance: none;
     background-color: #fafafa;
     border: 1px solid #cacece;
     box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);
     padding: 9px;
     border-radius: 50px;
     display: inline-block;
     position: relative;
    }
    .regular-radio:checked + label:after {
     content: ' ';
      12px;
     height: 12px;
     border-radius: 50px;
     position: absolute;
     top: 3px;
     background: #99a1a7;
     box-shadow: inset 0px 0px 10px rgba(0,0,0,0.3);
     text-shadow: 0px;
     left: 3px;
     font-size: 32px;
    }

    代码:

    <div class="button-holder">
       <input type="radio" id="radio-1-1" name="radio-1-set" class="regular-radio" checked /><label for="radio-1-1"></label><br />
       <input type="radio" id="radio-1-2" name="radio-1-set" class="regular-radio" /><label for="radio-1-2"></label><br />
       <input type="radio" id="radio-1-3" name="radio-1-set" class="regular-radio" /><label for="radio-1-3"></label><br />
       <input type="radio" id="radio-1-4" name="radio-1-set" class="regular-radio" /><label for="radio-1-4"></label><br />
      </div>

  • 相关阅读:
    python--函数的返回值、函数的参数
    python--字典,解包
    Vue--ElementUI实现头部组件和左侧组件效果
    Vue--整体页面布局
    jmeter--non GUI
    python--切片,字符串操作
    celery--调用异步任务的三种方法和task参数
    celery--实现异步任务
    celery--介绍
    开发问题记录
  • 原文地址:https://www.cnblogs.com/anhuidu/p/4485570.html
Copyright © 2020-2023  润新知