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;
    }
  • 相关阅读:
    研究下线程投递
    IOCP笔记
    线程同步之mutex和Semaphore
    线程同步之mutex和event区别
    MyStack
    unix环境高级编程 读书笔记
    binary search tree study
    技术博客地址搜集
    select收数据
    奇怪的问题
  • 原文地址:https://www.cnblogs.com/wangpeiyuan/p/9876002.html
Copyright © 2011-2022 走看看