zoukankan      html  css  js  c++  java
  • CSS修改radio的样式(对勾效果和圆形效果)

    在实际开发中经常会遇到修改radio按钮的样式,所以在这里记录一下,方便以后使用!!!

    使用伪元素方法方式修改默认的radio和checkbox图标。

    Radio

    效果图:

     具有代码如下:

    可以按照具体需求进行修改

    <input class="radio_type" type="radio" name="type" id="radio1" checked="checked"/> 
    <label for="radio1">radio1</label>
    <input class="radio_type" type="radio" name="type" id="radio2" /> 
    <label for="radio2">radio2</label>
    label{
        line-height: 20px;
        display: inline-block;
        margin-left: 5px;
        margin-right:15px;
        color: #777;
    }
    .radio_type{
        width: 20px;
        height: 20px;
        appearance: none;
        position: relative;
    }
    .radio_type:before{
        content: '';
        width: 20px;
        height: 20px;
        border: 1px solid #7d7d7d;
        display: inline-block;
        border-radius: 50%;
        vertical-align: middle;
    }
    .radio_type:checked:before{
        content: '';
        width: 20px;
        height: 20px;
        border: 1px solid #c59c5a;
        background:#c59c5a;
        display: inline-block;
        border-radius: 50%;
        vertical-align: middle;
    }
    .radio_type:checked:after{
        content: '';
        width: 10px;
        height:5px;
        border: 2px solid white;
        border-top: transparent;
        border-right: transparent;
        text-align: center;
        display: block;
        position: absolute;
        top: 6px;
        left:5px;
        vertical-align: middle;
        transform: rotate(-45deg);
    }
    .radio_type:checked+label{
        color: #c59c5a;
    }

    圆形款只需稍微修改一下css便好

    label{
       line-height: 20px;
       display: inline-block;
       margin-left: 5px;
       margin-right:15px;
       color: #777;
    }
    .radio_type{
       width: 20px;
       height:20px;
       appearance: none;
       position: relative;
    }
    .radio_type:before{
       content: '';
       width: 20px;
       height: 20px;
       border: 2px solid #EDD19D;//可以再这里更改按钮边框的颜色
       display: inline-block;
       border-radius: 50%;
       vertical-align: middle;
    }
    .radio_type:checked:before{
       content: '';
       width: 20px;
       height: 20px;
       border: 2px solid #EDD19D;//可以在这里颜色
       display: inline-block;
       border-radius: 50%;
       vertical-align: middle;
    }
    .radio_type:checked:after{
       content: '';
       width: 12px;
       height: 12px;
       text-align: center;
       background:#EDD19D;//可以在这里更改颜色
       border-radius: 50%;
       display: block;
       position: absolute;
       top: 6px;
       left: 6px;
    }
    .radio_type:checked+label{
       color: #EDD19D;
    }
  • 相关阅读:
    消息中间件(八)-----RabbitMQ延迟队列
    消息中间件(七)-----RabbitMQ死信队列
    通过过滤器、拦截器实现公共验证签名以及时间戳功能
    消息中间件(五)-----AMQP概论、rabbitMQ入门
    消息中间件(四)-----activemq集群
    消息中间件(三)-----限时订单的实现(delayQueue、mq)
    消息中间件(二)-----ActiveMQ高级特性和用法
    面试题:如何实现红包算法
    LRU算法与代码实现
    面试题:寻找缺失的整数
  • 原文地址:https://www.cnblogs.com/ZhaoWeiNotes/p/13491539.html
Copyright © 2011-2022 走看看