zoukankan      html  css  js  c++  java
  • radio美化

    今天遇到一个难题,我需要修改单选按钮选中的颜色,百度了一下,简直可怕,原来超级复杂,幸得一大神相助,代码如下:

    html:

    <input id="radio-1" name="radio" type="radio" checked><label for="radio-1"></label>
    <input id="radio-2" name="radio" type="radio"><label for="radio-2"></label>

    css:

    /* 自定义单选框样式*/
    input[type='radio']{ display:none;}
    input[type='radio']+label{display:inline-block;position:relative;overflow:hidden;18px;height:18px;vertical-align:middle;border:1px solid #888;
    background-color:#fff;margin-right:10px;cursor:pointer;border-radius:50%;}
    input[type='radio']+label:after{content:'';position:absolute;top:3px;left:3px;10px;height:10px;
    background-color: #17CDA6;border-radius: 50%;transform:scale(0);}
    input[type='radio']:checked+label{background-color:#fff;}
    input[type='radio']:checked+label:after{background:-color:#17CDA6;transform:scale(1);}

    效果:

  • 相关阅读:
    TCP/IP三次握手四次挥手
    注解(JDK1.5之后)
    枚举(JDK1.5之后)
    局部内部类
    非静态内部类
    静态内部类
    匿名内部类
    接口
    根父类:java.lang.Object
    native关键字
  • 原文地址:https://www.cnblogs.com/ryt103114/p/6491751.html
Copyright © 2011-2022 走看看