zoukankan      html  css  js  c++  java
  • 简单的纯css重置input单选多选按钮的样式--利用伪类和label两种方式

    由于input单选多选的原生样式通常都不符合需求,所以在实现功能时通常都需要美化按钮

    1. 利用伪类来重置单选按钮样式

    html

    <input type="radio" />
    <input type="checkbox" />

    css

    input{visibility: hidden;} // 让原生按钮不显示
    input::before{
    content: "";visibility: visible;display:inline-block;
    width: 0.36rem;height: 0.36rem; // 设置合适的宽高
    background: url(../assets/icon/nocheck_icon.png) no-repeat center; // 用自己的图片替换-这个是未选中的图片
    background-size:contain; }
    input:checked::before{
    content: "";visibility: visible;display:inline-block;
    width: 0.36rem;height: 0.36rem;
    background: url(../assets/icon/checked_icon.png) no-repeat center; // 用自己的图片替换-这个是选中的图片
    background-size:contain; 
    }

     2. 利用label来重置单选按钮样式

    通常都是要和label一起配合使用的,有点击事件的时候,还是配合label来重写样式会更好

    html

    <input type="radio" name="radio" value="0" id="val_1"><label for="val_1">选项1</label>

    css

    input{
           visibility: hidden;
    }
    input+label{
           vertical-align: middle;
           width: 0.3rem;
           height: 0.3rem; // 设置合适的宽高
           background: url(~@/assets/mobile/check.png) no-repeat center; // 用自己的图片替换-这个是未选中的图片
           background-size:contain; 
    }
    input:checked+label{
            background: url(~@/assets/mobile/checked.png) no-repeat center; // 用自己的图片替换-这个是选中的图片
            background-size:contain; 
            color: #FF7244;
    }
  • 相关阅读:
    CSS3阴影 box-shadow的使用和技巧总结[转]
    $.getJSON(url,function success(){})回调函数不起作用
    实现最小宽度的几种方法及CSS Expression[转]
    关于sql 中 group by 和 having
    hackerrank DFS Edges
    hackerrank [Week of Code 33] Bonnie and Clyde
    AtCoder Regular Contest 076
    大模数乘法模板
    AtCoder Grand Contest 016
    CodeChef June Challenge 2017
  • 原文地址:https://www.cnblogs.com/leiting/p/9780102.html
Copyright © 2011-2022 走看看