zoukankan      html  css  js  c++  java
  • 复选框checkbox样式修改

    该方法只兼容IE9及以上

    将checkbox和label关联起来,

    将checkbox隐藏掉,通过点击label来点击checkbox,label的样式即可自定义。

    通过checkbox:checked + label:after来控制点击之后的符号

     

    通常我们使用以下html结构,我们给复选框定义id#checkbox_a1,然后使用label的for属性与之关联,这样的话,用户点击label的时候,实际上就相当于点击了#checkbox_a1。

    <input type="checkbox" id="checkbox_a1" class="chk_1" /> 
    <label for="checkbox_a1">check</label> 



    通过label和checkbox,我们可以将checkbox隐藏,而将label制作为各种漂亮超酷的复选框样式。我们可以使用:before和:after伪元素来制作各种效果,如滑动按钮的效果。这些效果都可以通过相邻兄弟选择器来选择与checkbox相邻的label来实现,下面是一个简单的例子:
    .chk_1 { 
        display: none; 
    } 
     
    .chk_1 + label { 
        #FFF; 
        border: 1px solid #C1CACA; 
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05); 
        padding: 9px; 
        border-radius: 5px; 
        display: inline-block; 
        position: relative; 
        margin-right: 30px; 
    } 
    .chk_1 + label:active { 
        box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1); 
    } 
     
    .chk_1:checked + label { 
        #ECF2F7; 
        border: 1px solid #92A1AC; 
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05), inset 15px 10px -12px rgba(255, 255, 255, 0.1); 
        color: #243441; 
    } 
     
    .chk_1:checked + label:after { 
        content: '2714'; //勾选符号 
        position: absolute; 
        top: 0px; 
        left: 0px; 
        color: #758794; 
        width: 100%; 
        text-align: center; 
        font-size: 1.4em; 
        padding: 1px 0 0 0; 
        vertical-align: text-top; 
    } 
  • 相关阅读:
    Redis 启动与授权
    ssh客户端乱码
    centos修改oracle字符集
    netty 基础知识
    推送技术
    oracle 12C安装问题
    Labview学习之路(十三)常用快捷键积累
    Labview学习之路(十二)如何让图片做前面板背景
    UCOSIII(一)常用函数积累
    Keil出现错误
  • 原文地址:https://www.cnblogs.com/brainworld/p/6811834.html
Copyright © 2011-2022 走看看