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;
    }
  • 相关阅读:
    cf B. Sereja and Suffixes
    cf E. Dima and Magic Guitar
    cf D. Dima and Trap Graph
    cf C. Dima and Salad
    最短路径问题(floyd)
    Drainage Ditches(网络流(EK算法))
    图结构练习—BFSDFS—判断可达性(BFS)
    Sorting It All Out(拓扑排序)
    Power Network(最大流(EK算法))
    Labeling Balls(拓扑)
  • 原文地址:https://www.cnblogs.com/leiting/p/9780102.html
Copyright © 2011-2022 走看看