zoukankan      html  css  js  c++  java
  • 纯css美化复选框,单选框,滑动条(range)

    <div class="box">
      <!-- 借鉴地址:http://www.cnblogs.com/xiaoxianweb/p/5465607.html -->   <!-- 复选框type改成check即可 -->   <span class="check">     <input type="radio" name="radio" id="check1">     <label for="check1"></label>   </span>   <label for="check1"></label>   <br>   <br>   <span class="check">     <input type="radio" name="radio" id="check2">     <label for="check2"></label>   </span>   <label for="check2"></label> </div>
    * { margin: 0; padding: 0; }
    .box { width: 300px; height: 100px; margin: 100px auto; }
    
    /*现将input和label放在一个盒子中,使用定位将input放在label下隐藏*/
    .check { position: relative; display: inline-block; width: 20px; height: 20px; margin-right: 5px; }
    .check input { display: none; }
    .check label { position: absolute; width: 16px; height: 16px; top: 0; left: 0; border: 2px solid #cacaca; border-radius: 50%; background: #fff; }
    
    /*鼠标悬浮样式*/
    .check label:hover { border-color: #f78642; }
    .check label:after { position: absolute; content: ""; width: 8px; height: 4px; border: 2px solid #cacaca; border-top: none; border-right: none; opacity: 0.4; transform: rotate(-45deg); top: 4px; left: 3px; }
    .check label:hover:after { border-color: #f78642; }
    
    /*重点在这里!因为label和input绑定在了一起,
        并且在一个盒子中属于兄弟元素,
        使用css选择器 '+' 将选中的input和他同级的label的样式设置如下,
        只有opera支持label属性样式更改,
        这种方式完美解决了不兼容各大
        主流浏览器问题(IE我就不说什么了),
        6的一逼。妈妈再也不用担心我为复选框样式发愁
        啦,感谢博客园作者《小仙前端》*/
    .check input:checked+label { border: 2px solid #f78642; }
    .check input:checked+label:after { opacity: 1; border: 2px solid #f78642; border-top: none; border-right: none; }

    range美化

    input[type="range"]{
        width: 300px;
        height: 10px;
        border: 0;
        background-color: #f0f0f0;
        border-radius: 5px;
        position: relative;
        -webkit-appearance: none !important; 
        outline: none;
    }
    input[type=range]::-webkit-slider-thumb {
        -webkit-appearance: none;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: #ff4400;
    }
  • 相关阅读:
    设计模式学习总结系列应用实例
    【研究课题】高校特殊学生的发现及培养机制研究
    Linux下Oracle11G RAC报错:在安装oracle软件时报file not found一例
    python pro practice
    openstack python sdk list tenants get token get servers
    openstack api
    python
    git for windows
    openstack api users list get token get servers
    linux 流量监控
  • 原文地址:https://www.cnblogs.com/lvyueyang/p/6812052.html
Copyright © 2011-2022 走看看