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);}

    效果:

  • 相关阅读:
    JSP脚本的9个内置对象
    JSP基础
    修改 MySQL Workbench editor的字体
    pb datawindow语法
    SqlServer 查询死锁,杀死死锁进程
    pb设计笔记
    sql server网络备份
    数据库设计
    各种默认回车提交表单
    jQuery选择器 (详解)
  • 原文地址:https://www.cnblogs.com/ryt103114/p/6491751.html
Copyright © 2011-2022 走看看