zoukankan      html  css  js  c++  java
  • css3美化radio样式

    .magic-radio{
        position: absolute;
        display: none;
    }
    
    .magic-radio + label {
        position: relative;
        display: block;
        padding-left: 30px;
        cursor: pointer;
        vertical-align: middle;
        padding-left: 1.5rem !important;
        min- auto !important;
    }
    .magic-radio:checked + label:before {
        background: #3e97eb;
        border-color: #3e97eb;
    }
    .magic-radio + label:before {
        border-radius: 50%;
    }
    .magic-radio + label:before {
        position: absolute;
        top: 0;
        left: 0;
        display: inline-block;
         25px;
        height: 25px;
        content: '';
        border: 1px solid #c0c0c0;
    
    }
    
    .magic-radio:checked + label:after{
        display: block;
    }
    .magic-radio + label:after {
        top: 5px;
        left: 10px;
        box-sizing: border-box;
         8px;
        height: 15px;
        transform: rotate(45deg);
        border- 2px;
        border-style: solid;
        border-color: #fff;
        border-top: 0;
        border-left: 0;
    
    }
    .magic-radio + label:after{
        position: absolute;
        display: none;
        content: '';
    }
    

    html:

    <div class="opt" >
    	<input class="magic-radio" type="radio" name="radio" id="r1" value="option1">
    	<label for="r1">男</label>
    </div>
    

    最终效果:

  • 相关阅读:
    激活函数
    C++ 三大属性之多态
    C++ 编译运行过程
    优化方法
    目标检测中的IOU
    pytorch 单机多gpu运行
    WSAEventSelect网络模型
    根据数组中的索引删除对应的值
    从以下几点提高服务器并发量
    std::function
  • 原文地址:https://www.cnblogs.com/momozjm/p/7519937.html
Copyright © 2011-2022 走看看