一、背景

设计狮童鞋总是会设计各种高大上的效果图，比如下面这个土豪金的效果。

该图中“已阅读并同意相关服务条款”前面的复选框有一个金色的边框，打钩时是一个金色的对勾。接下来说说怎样实现该效果。

二、解决方法

1、纯css解决方法

在css3 选择器（三）一文中介绍过一个选择器【:checked】选择器。

单选按钮和复选按钮都有选中和未选中状态。要设置这两个按钮默认样式稍微复杂点。该文通过:checked选择器配合其他表情实现自定义样式。

举例：使用:checked选择器模拟实现复选框样式。

  1. <meta charset="utf-8">
  2. <style type="text/css">
  3. form {
  4.   border: 1px solid #ccc;
  5.   padding: 20px;
  6.   width: 300px;
  7.   margin: 30px auto;
  8. }
  9.  
  10. .wrapper {
  11.   margin-bottom: 10px;
  12. }
  13.  
  14. .box {
  15.   display: inline-block;
  16.   width: 20px;
  17.   height: 20px;
  18.   margin-right: 10px;
  19.   position: relative;
  20.   border: 2px solid orange;
  21.   vertical-align: middle;
  22. }
  23.  
  24. .box input {
  25.   opacity: 0;
  26. }
  27.  
  28. .box span {
  29.   position: absolute;
  30.   top: -10px;
  31.   right: 3px;
  32.   font-size: 30px;
  33.   font-weight: bold;
  34.   font-family: Arial;
  35.   -webkit-transform: rotate(30deg);
  36.   transform: rotate(30deg);
  37.   color: orange;
  38. }
  39.  
  40. input[type="checkbox"] + span {
  41.   opacity: 0;
  42. }
  43.  
  44. input[type="checkbox"]:checked + span {
  45.   opacity: 1;
  46. }
  47. </style>
  48.  
  49. <form action="#">
  50.   <div class="wrapper">
  51.     <div class="box">
  52.       <input type="checkbox" checked="checked" id="username" /><span>√</span>
  53.     </div>
  54.     <label for="username">我是选中状态</label>
  55.   </div>
  56.  
  57.   <div class="wrapper">
  58.     <div class="box">
  59.       <input type="checkbox"  id="userpwd" /><span>√</span>
  60.     </div>
  61.     <label for="userpwd">我是未选中状态</label>
  62.   </div>
  63. </form>

模拟实现一个选中和未选中的样式。

没有样式时的效果图如下，

最终添加样式后效果如下。

实际开发中，我尝试使用这种方法。

这种方法有个问题：点选框时无法选中，必须点文字才能选中 。

这在实际应用中肯定是无法忍受的,实际应用中推荐第二种方法。

2、配合js解决方法

用到图片：

  

原理：label和input外面套一层.custom-checkbox作为父元素相对定位。

input绝对定位于左上角，label也绝对定位于左上角，覆盖input的方块。通过给label设置padding-left和背景图来模拟未选中状态。选中时加一个.right类更改背景图片为选中状态的背景图。

通过js点击事件，label被点击时在选中与未选中状态切换。

  1. <meta charset="utf-8"/>
  2. <style type="text/css">
  3. .custom-checkbox{
  4. border:1px solid red;
  5. position:relative;
  6. height:30px;
  7. }
  8. .custom-checkbox input{
  9. position:absolute;
  10.  
  11. }
  12. .custom-checkbox label{
  13. padding-left:20px;
  14. position:absolute;
  15. top:-1px;
  16. left:0;
  17. background:url(images/bg-unchecked.png) no-repeat top 4px left 3px;
  18. }
  19. .custom-checkbox label.right{
  20. background:url(images/bg-checked.png) no-repeat top 2px left 3px;
  21. }
  22.  
  23. </style>
  24. <body>
  25. <div class="custom-checkbox">
  26. <input type="checkbox" id="test"/><label for="test">已阅读并同意相关服务条款</label>
  27. </div>
  28.  
  29. <script src="http://code.jquery.com/jquery-latest.js"></script>
  30. <script type="text/javascript">
  31.  
  32.  $('.custom-checkbox label').click(function(){
  33.  if($(this).hasClass('right')){
  34.  $('.custom-checkbox label').removeClass("right");
  35.  }else{
  36.  $('.custom-checkbox label').addClass("right");
  37.  }
  38.  });
  39. </script>
  40. </body>

问题：点击频率过快，会双击选中文字，影响用户体验。

解决办法：

  1. <label for="test" onselectstart="return false;" style="-moz-user-select:none;">已阅读并同意相关服务条款</label>

效果：

3、配合js简化版[update20161223]

2的方案用2次绝对定位有点麻烦，因为用了<input type="checkbox">的复选框，如果要求没那么复杂，简单用的<i>标签模拟一下复选框也一样可以实现效果。

效果：图片：

html:

  1. <label class="agree-label" onselectstart="return false;" style="-moz-user-select:none;">
  2.         <i class="cus-checked"></i>同意&nbsp;<a href=":;" target="_blank">某某服务条款</a>
  3. </label>

css:

  1.     .agree-label {
  2.         display: inline-block;
  3.         font-size: 18px;
  4.     }
  5.  
  6.     .agree-label i {
  7.         display: inline-block;
  8.         width: 21px;
  9.         height: 22px;
  10.         margin-bottom: -4px;
  11.         margin-right: 6px;
  12.         background: url(images/checkedbox.png) no-repeat;
  13.     }
  14.  
  15.     .agree-label i.cus-checked {
  16.         background-position: 0 -22px;
  17.     }

js:

  1. $('.agree-label').click(function() {
  2.     if ($('.agree-label i').hasClass('cus-checked')) {
  3.         $('.agree-label i').removeClass("cus-checked");
  4.     } else {
  5.         $('.agree-label i').addClass("cus-checked");
  6.     }
  7. });

三、总结

单选框样式和复选框原理是类似的。上面办法都是一种模拟实现。

正如我在::before和::after伪元素的用法 一文中说过，早在10年我们会使用::before和::after来实现多背景图片，现在css3多背景已成为标准；我们对复选框样式的模拟实现也许会推动它成为标准，这也就是我们为后人做的贡献了，让他们工作更轻松。

还有一点我想说的是推动前端技术发展的，不仅有前端同行们，还有我们可爱的设计师们。如果只有前端，我们会停留在已有技术的可行性上做一些保守的效果，但是有了设计师的“完美主义”，让我们脑洞大开，挑战自我，促进技术更上一层楼。

本文作者starof,因知识本身在变化，作者也在不断学习成长，文章内容也不定时更新，为避免误导读者，方便追根溯源，请诸位转载注明出处：http://www.cnblogs.com/starof/p/4904929.html有问题欢迎与我讨论，共同进步。

表单元素——checkbox样式美化的更多相关文章

  1. angular5 表单元素 checkbox radio 组讲解

    一.checkedbox 1.ngModel绑定方式 <input [(ngModel)]="item.checked" value="item.checked&q ...

  2. 文字和表单（checkbox/radio）元素垂直对齐方法，兼容Firefox和IE。

    这几天在做表单时总会碰到复选框(checkbox)和单选框(radio)与文字不对齐的问题,要不是checkbox上浮了,要不是文字上浮.在前端开发过程中,单(复)选框和它们后面的提示文字在不进行任何 ...

  3. jquery attr处理checkbox / select 等表单元素时的坑

    先上html结构 <body> <form action=""> <input type="checkbox" id=" ...

  4. 修改表单元素中placeholder属性样式、清除IE浏览器中input元素的清除图标和眼睛图标

    一.修改input元素placeholder属性样式 在做项目的时候,一般表单元素的placeholder属性样式都是使用浏览器默认的,但有时候为了追求设计上的美感需要修表单元素的placeholde ...

  5. jquery attr处理checkbox / select 等表单元素时只能使用一次的坑

    先上html结构 <body> <form action=""> <input type="checkbox" id=" ...

  6. CSS3过渡结束监听事件,清除/修改表单元素的一些默认样式

    document.querySelector('div').addEventListener('transitionEnd',function(){ console.log('过度结束') }) 如果 ...

  7. html checkbox样式美化

    思路:使用label结合checkbox,背景图片进行美化. 原理: 1. for 属性规定 label 与哪个表单元素绑定,显式绑定和隐式绑定,均可实现checkbox的选用与取消效果,具体见:&l ...

  8. CSS之表单元素

    表单就是收集用户信息的,就是让用户填写的.选择的. 1                <div> 2                         <h3>欢迎注册本网站&l ...

  9. 【原】如何改变表单元素的外观(for Webkit and IE10)

    表单元素在网页设计中使用的非常频繁,如文本输入框.单选框.复选框.选择列表.上传文件,它们在浏览器中的展现有自带的外观,为了在视觉上取得更好的产品体验,保持客户端的统一,通常产品经理会提出需要改变它的 ...

随机推荐

  1. SVN：Previous operation has not finished; run 'cleanup' if it was interrupted

    异常处理汇总-开发工具  http://www.cnblogs.com/dunitian/p/4522988.html cleanup failed to process the following ...

  2. .Net MVC 网站中配置文件的读写

    网站中有很多需要设置的内容,像网站信息,注册设置,上传设置等.如果保存在数据库中需要单独建张表,表中只有一条记录,这样会让数据库很臃肿,而且频繁存取数据库的效率也是个问题.而保存在config文件里是 ...

  3. ASP.NET 5 Target framework dnx451 and dnxcore50

    中文不知如何定义标题,所以干脆就直接贴出关键字,在 ASP.NET 5 项目的 project.json 配置文件中,会有这样的定义: "frameworks": { " ...

  4. 计算机网络学习笔记--数据链据层之MAC子层(整理)

    概述: 为什么需要介质访问控制子层(MAC)? 介质访问控制子层(MAC)是局域网体系结构中划分的子层,多路访问链路采用共享介质连接所有站点.发送站点通过广播方式发送数据并占用整个带宽,如果有多个站点 ...

  5. 你真的会玩SQL吗？Case也疯狂

    你真的会玩SQL吗?系列目录 你真的会玩SQL吗?之逻辑查询处理阶段 你真的会玩SQL吗?和平大使 内连接.外连接 你真的会玩SQL吗?三范式.数据完整性 你真的会玩SQL吗?查询指定节点及其所有父节 ...

  6. C++程序员如何转Java

     C++程序员如何转Java 忙里偷闲,到了这个时间终于得空写一篇早想写的文章.其实本文的标题有些不太准确,C++程序员写Java代码不是说就非得转行写Java,抛弃C++,而只是多了一个选择而已.两 ...

  7. angularjs和ajax的结合使用 （一）

    好久没写文了.这是一篇关于easyui配合ajax使用 的文章, 顺带介绍angularjs的使用 以及让你感受到angularjs的威力.网上对于ajax 的文也是多如牛毛 .我就不直接 从那种原生 ...

  8. 成吨提高开发效率：Intellij Shortcuts精简子集与思维模式

    在线精简cheatsheet备查表:intellij.linesh.twGithub项目:intellij-mac-frequent-keymap Intellij的快捷键多而繁杂,从官方推荐的key ...

  9. Github pages + jekyll 博客快速搭建

    Github pages + jekyll 博客快速搭建 寻找喜欢的模版 https://github.com/jekyll/jekyll/wiki/sites http://jekyllthemes ...

  10. js验证输入的是否是数字，小数保留几位小数

    1.验证方法 validationNumber(e, num)  e代表标签对象,num代表保留小数位数 function validationNumber(e, num) { -]+\.?[-]*$ ...