美文网首页
6-3 使用者体验 -- 自定义checkbox

6-3 使用者体验 -- 自定义checkbox

作者: juicees | 来源:发表于2016-05-04 10:38 被阅读113次
    1. 这一小节对于我来说真的是福音,我一直很苦恼(对于checkbox)。在我未接触书本之前,我一直使用默认样式的checkbox,以前尝试修改它,给它定义宽度什么的都尼玛没有效果,这就让人很头疼了!

    2. 这一小节练习的还是伪元素,我们需要实现以下的checkbox

    自定义checkbox

    相对于每个浏览器都不一样的checkbox,chrome的默认样式还算可以接受


    chrome默认样式

    小测试

    html

    <input type="checkbox" id="awesome">
    <label for="awesome">Awesome!</label>
    

    第一步:
    利用伪元素创建一个大小类似于原样式的方块

    css

    .checkbox input[type="checkbox"]+label::before{ 
       content: '\a0';  /* non-break-block*/
       display: inline-block;  
       vertical-align: .1em; 
       width: .8em; 
       height: .8em;  
       margin-right: .2em;  
       border-radius: .2em;
       background: silver; 
       text-indent: .15em; 
       line-height: .65em; 
       transition: background .2s;
    }
    

    关于第一行的不换行空格,其实是个占位符

      content: '\a0';  /* non-break-block*/
    

    具体想了解不换行空格,可以看看这篇文章,写的很具体

    http://www.cnblogs.com/yjf512/p/3216392.html

    效果:

    第二步:
    现在我们需要用符合可及性的方式来隐藏原来的checkbox,表示我们不能使用display:none,因为这样会把它完全从键盘Tab键里移动的顺序里移除。所以可以改用这种方式

    input[type="checkbox"]{   
      position: absolute;  
      clip: rect(0,0,0,0);
    }
    

    效果:

    第三步:
    设置checked, focus样式

    .checkbox input[type="checkbox"]:checked + label::before{  
      content: '\2713';    
      background: yellowgreen;
    }
    .checkbox input[type="checkbox"]:focus + label::before{  
      box-shadow: 0 0 0 1px #58a;
    }
    
    checked 状态

    自定义checkbox完成


    利用这个特性可以制作一些按钮状态(on和off不同的样式)

    no checked checked

    当然这样的效果也可以用自定义属性(或者改变类)实现,不过需要一点JS代码。不过这种纯CSS实现方法更加有趣!

    相关文章

      网友评论

          本文标题:6-3 使用者体验 -- 自定义checkbox

          本文链接:https://www.haomeiwen.com/subject/elyrrttx.html