zoukankan      html  css  js  c++  java
  • CSS自定义Checkbox样式(纯CSS)

    对于checkbox,有时候为了美观,我们需要对其自定义样式。

    如:现有禁用的checkbox用于查看页面,默认样式:

    我们对其样式调整:

    input[type=checkbox]:checked:disabled { appearance: none; -moz-appearance: none; -webkit-appearance: none; width: 13px; height: 13px; position: relative; border: 1px solid rgba(0, 119, 255, 0.7); border-radius: 2px; overflow: hidden; }
        input[type=checkbox]:checked:disabled::before { content: ''; display: block; height: 13px; width: 13px; background: rgba(0, 119, 255, 0.6); position: absolute; top: -1px; left: -1px; border-radius: 2px; }
        input[type=checkbox]:checked:disabled::after { content: '」'; display: block; width: 14px; height: 14px; transform: rotate(45deg); -ms-transform: rotate(45deg); -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); position: absolute; top: 2px; left: 0px; overflow: hidden; color: #fff; font-weight: bold; line-height: 4px; }

    调整后样式:

    对比未禁用的样式:

     看起来高度还原了原本样式,达到了只调整了颜色的效果。

    其中appearance: none;的效果很重要,取消之前的所有外观样式。完全重新定义样式,但很 这个属性IE不支持。不过最新的Edeg已经采用Chrome内核了。

    (不支持IE,不被支持时,会显示为默认样式,影响不大。功能能用。)

    =============================================================================
      文章结束,如有问题请留言,感谢!٩( 'ω' )و 
    =============================================================================
  • 相关阅读:
    工厂模式--工厂方法模式(Factory Method Pattern)
    工厂模式--简单工厂模式( Simple Factory Pattern )
    blog2.0--Springboot添加redis缓存(注解方式)
    blog2.0--JSR303参数校验+全局异常处理器
    高并发秒杀——SpringBoot集成redis
    SpringBoot报错HHH000206: hibernate.properties not found
    blog2.0--保存博客文章到本地磁盘
    Swagger注解 传参
    设计模式--单例模式
    跳表
  • 原文地址:https://www.cnblogs.com/miaolin/p/14661786.html
Copyright © 2011-2022 走看看