一、背景

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

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

二、解决方法

1、纯css解决方法

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

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

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

<meta charset="utf-8">

<style type="text/css">

form {

  border: 1px solid #ccc;

  padding: 20px;

  width: 300px;

  margin: 30px auto;

}

.wrapper {

  margin-bottom: 10px;

}

.box {

  display: inline-block;

  width: 20px;

  height: 20px;

  margin-right: 10px;

  position: relative;

  border: 2px solid orange;

  vertical-align: middle;

}

.box input {

  opacity: 0;

}

.box span {

  position: absolute;

  top: -10px;

  right: 3px;

  font-size: 30px;

  font-weight: bold;

  font-family: Arial;

  -webkit-transform: rotate(30deg);

  transform: rotate(30deg);

  color: orange;

}

input[type="checkbox"] + span {

  opacity: 0;

}

input[type="checkbox"]:checked + span {

  opacity: 1;

}

</style>

<form action="#">

  <div class="wrapper">

    <div class="box">

      <input type="checkbox" checked="checked" id="username" /><span>√</span>

    </div>

    <label for="username">我是选中状态</label>

  </div>

  <div class="wrapper">

    <div class="box">

      <input type="checkbox"  id="userpwd" /><span>√</span>

    </div>

    <label for="userpwd">我是未选中状态</label>

  </div>

</form>

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

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

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

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

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

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

2、配合js解决方法

用到图片：

  

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

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

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

<meta charset="utf-8"/>

<style type="text/css">

.custom-checkbox{

border:1px solid red;

position:relative;

height:30px;

}

.custom-checkbox input{

position:absolute;

}

.custom-checkbox label{

padding-left:20px;

position:absolute;

top:-1px;

left:0;

background:url(images/bg-unchecked.png) no-repeat top 4px left 3px;

}

.custom-checkbox label.right{

background:url(images/bg-checked.png) no-repeat top 2px left 3px;

}

</style>

<body>

<div class="custom-checkbox">

<input type="checkbox" id="test"/><label for="test">已阅读并同意相关服务条款</label>

</div>

<script src="http://code.jquery.com/jquery-latest.js"></script>

<script type="text/javascript">

 $('.custom-checkbox label').click(function(){

 if($(this).hasClass('right')){

 $('.custom-checkbox label').removeClass("right");

 }else{

 $('.custom-checkbox label').addClass("right");

 }

 });

</script>

</body>

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

解决办法：

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

效果：

3、配合js简化版[update20161223]

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

效果：图片：

html:

<label class="agree-label" onselectstart="return false;" style="-moz-user-select:none;">

        <i class="cus-checked"></i>同意&nbsp;<a href=":;" target="_blank">某某服务条款</a>

</label>

css:

    .agree-label {

        display: inline-block;

        font-size: 18px;

    }

    .agree-label i {

        display: inline-block;

        width: 21px;

        height: 22px;

        margin-bottom: -4px;

        margin-right: 6px;

        background: url(images/checkedbox.png) no-repeat;

    }

    .agree-label i.cus-checked {

        background-position: 0 -22px;

    }

js:

$('.agree-label').click(function() {

    if ($('.agree-label i').hasClass('cus-checked')) {

        $('.agree-label i').removeClass("cus-checked");

    } else {

        $('.agree-label i').addClass("cus-checked");

    }

});

三、总结

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

正如我在::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. Log4Net生成出现未引用错误解决方法

    1.步骤一: 2.步骤二: 明明添加了引用怎么还提示找不到命名空间呢.解决这个问题很简单,右键项目选择属性: 3.步骤三:换成.NET Framework 4即可,解决! 4.两个有啥区别? Micr ...

  2. iOS手势解锁、指纹解锁--Swift代码

    一.手势密码 1. 1.1.用UIButton组成手势的节点. 1.2.当手指接触屏幕时,调用重写的 touchesBegan:withEvent方法(在touchesBegan里调用setNeeds ...

  3. Java设计模式之策略模式（Strategy）

    前言: 最近一直在学习基于okHttp网络请求,学习的过程中就想起了之前项目中有这么一个需求不同的接口要采用不同的加密方式,比如登录之前要采用RSA加密,登录之后要采用AES加密,当时是采用靠传递一个 ...

  4. iOS开发之三个Button实现图片无限轮播(参考手机淘宝，Swift版)

    这两天使用Reveal工具查看"手机淘宝"App的UI层次时,发现其图片轮播使用了三个UIButton的复用来实现的图片循环无缝滚动.于是乎就有了今天这篇博客,看到“手机淘宝”这个 ...

  5. 数百个 HTML5 例子学习 HT 图形组件 – 3D 建模篇

    http://www.hightopo.com/demo/pipeline/index.html <数百个 HTML5 例子学习 HT 图形组件 – WebGL 3D 篇>里提到 HT 很 ...

  6. Apache Hadoop2.x 边安装边入门

    完整PDF版本:<Apache Hadoop2.x边安装边入门> 目录 第一部分:Linux环境安装 第一步.配置Vmware NAT网络 一. Vmware网络模式介绍 二. NAT模式 ...

  7. 翻译：使用 ASP.NET MVC 4, EF, Knockoutjs and Bootstrap 设计和开发站点 - 2

    我们的目标: 需求 Screen 1: 联系人列表 - 查看所有联系人 1.1 这个 screen 将显示数据库中的所有联系人. 1.2 用户可以删除任何联系人.1.3 用户可以编辑任何联系人的详细信 ...

  8. 学习EF之贪懒加载和延迟加载(2)

    通过昨天对EF贪婪加载和延迟加载的学习,不难发现,延迟加载还是很好用的,但是问题也就来了,有的时候我们只需要加载一个实体,不需要和他相关的外部实体,这时候我们来看看EF延迟加载时怎么作用的吧 打开pr ...

  9. ABP学习日记1

  10. C# - 多线程 之 锁系统

    lock 关键字, Monitor 监控器, using System.Threading: // 提供同步访问对象的机制. public static class Monitor { public ...