美文网首页
input type = radio修改样式

input type = radio修改样式

作者: 匆匆那年_海 | 来源:发表于2019-10-14 16:24 被阅读0次
    1.png
    <label class="test-label">
        <input class="test-radio" name="fs" type="radio" value="325" checked>
        <span class="test-radioInput"></span>
        自驾
    </label>
    <label class="test-label">
        <input class="test-radio" name="fs" type="radio" value="425">
        <span class="test-radioInput"></span>
        上门取车
    </label>
    
    .test-label {
      margin: 20px 20px 0 0;
      display: inline-block;
    }
    
    .test-radio {
      display: none
    }
    
    .test-radioInput {
      background-color: #48A919;
      border-radius: 100%;
      display: inline-block;
      height: 16px;
      width: 16px;
      line-height: 1;
      margin-top: -1px;
      vertical-align: middle;
    }
    
    .test-radioInput:after {
      content: "";
      background-color: #fff;
      border-radius: 100%;
      display: inline-block;
      height: 12px;
      margin: 2px;
      width: 12px
    }
    
    .test-radio:checked+.test-radioInput:after {
      background-color: #48A919;
    }
    

    原文作者:匆匆那年_海,博客主页:https://www.jianshu.com/u/910c0667c515
    95后前端汉子,爱编程、优秀、聪明、理性、沉稳、智慧的程序猿一枚。

    相关文章

      网友评论

          本文标题:input type = radio修改样式

          本文链接:https://www.haomeiwen.com/subject/kuirmctx.html