zoukankan      html  css  js  c++  java
  • 改写radio样式

    <div class="test">
      <input type="radio" name="radioHouse" class="radio" id="big">
      <label for="big">大床房</label>
    </div>
    <div class="test">
      <input type="radio" name="radioHouse" class="radio" id="small">
      <label for="small">小床房</label>
    </div>
     
    .radio{
      position: absolute;  //隐藏label标签原本的样式
      clip: rect(0, 0, 0, 0);
    }
    .radio:checked + label::before{
      content: "a0";
      display: inline-block;
      0.25rem;
      height:0.25rem;
      border-radius: 50%;
      opacity:0.9;
      border:0.05rem solid #55D8C2;
      background-clip: content-box;
      background-color: #01cd78;
      padding: .2em;
    }
    .radio + label::before{
      content: "a0";
      display: inline-block;
      0.55rem;
      height:0.55rem;
      border-radius: 50%;
      opacity:0.9;
      border:0.05rem solid #999;
      text-indent: .15em;
      line-height: 0.5rem;
      margin-right: .4em;
      vertical-align: middle;
    }
  • 相关阅读:
    Less与Sass
    JQuery基础
    JS中DOM以及BOM
    JS函数入门
    JS入门
    响应式布局和弹性布局,移动开发常用技巧
    CSS基础1
    H5入门
    error C2143: syntax error : missing ';' before 'type'
    Windows系统下nodejs安装及配置
  • 原文地址:https://www.cnblogs.com/wangpeiyuan/p/9876002.html
Copyright © 2011-2022 走看看