zoukankan      html  css  js  c++  java
  • css自定义checkbox样式

    1.利用css3属性 appearance。

    该属性(强制)更改(改变)默认(原生)样式。

    Firefox 支持替代的 -moz-appearance 属性;Safari 和 Chrome 支持替代的 -webkit-appearance 属性;IE不支持该属性。

    所以可以利用该属性取消checkbox的原生样式。

    2.利用:checked选择器

    当checkbox被选中的时候改变样式。

    3. :after选择器 + content属性

    :after选择器向元素之后插入内容。

    我们再利用text-aligen和line-height让内容正居中就行了。

    电脑刺绣绣花厂 http://www.szhdn.com 广州品牌设计公司https://www.houdianzi.com

    代码

    <!DOCTYPE html><html><head>
    
        <meta charset="UTF-8">
    
        <title>checkbox</title>
    
        <style>
    
            input {
    
                 16px;
    
                height: 16px;
    
                margin-top: 0;
    
                background-color: #fff;            
    
                border: 1px solid #c9c9c9;
    
                border-radius: 2px;
    
                color: #fff;
    
                text-align: center;
    
                line-height: 15px;
    
                -webkit-appearance:none;
    
                -moz-appearance:none;
    
                -ms-appearance:none;
    
                -o-appearance:none;
    
                appearance:none;
    
                outline: none;
    
            }
    
     
    
            input:hover {
    
                border-color: #43adea;
    
            }
    
     
    
            input:checked {
    
                color: #fff;
    
                background-color: #43adea;
    
                border: 1px solid #43adea;
    
            }
    
     
    
            input:after {
    
                content: "✔";
    
            }
    
        </style></head><body>
    
        <input type="checkbox">
    
    </body>
    </html>
  • 相关阅读:
    memcached全面剖析
    Zabbix中文使用手册
    lombok
    guava cache
    linux 文件检索操作
    mysql慢查询
    碎片脚本注解(后续整理)
    Docker 目录挂载详述
    jenkins 添加 sonraqube java&vue项目记录
    Ansible unarchive模块
  • 原文地址:https://www.cnblogs.com/qianxiaox/p/13816291.html
Copyright © 2011-2022 走看看