一、背景

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

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

二、解决方法

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. 【Win 10 应用开发】多媒体转码

    上次本来说好,今天咱们来讨论 socket 相关的话题,但,对于 socket ,老周还有一些问题没弄清楚,等弄清楚了,再和大伙伴们一起探讨.故,今天咱们扯一扯多媒体转码的事. 听起来挺复杂的,不过, ...

  2. 移动端HTML5音频与视频问题及解决方案

    最近在研究用视频代替动画,用视频代替精灵动画,我们称这种视频叫做交互视频. 传统的精灵动画: 磁盘空间大,下载慢,尤其是在线播放,会更慢 文件太多,在线播放的时候,太多http请求,会导致响应慢,或者 ...

  3. ASP.NET MVC5+EF6+EasyUI 后台管理系统（46）-工作流设计-设计分支

    系列目录 步骤设置完毕之后,就要设置好流转了,比如财务申请大于50000元(请假天数>5天)要总经理审批,否则财务审批之后就结束了. 设置分支没有任何关注点,我们把关注点都放在了用户的起草表单. ...

  4. K-Means聚类算法原理

    K-Means算法是无监督的聚类算法,它实现起来比较简单,聚类效果也不错,因此应用很广泛.K-Means算法有大量的变体,本文就从最传统的K-Means算法讲起,在其基础上讲述K-Means的优化变体 ...

  5. 无限循环轮播图之运动框架（原生JS）

    封装运动框架 function getStyle(obj,name){ if(obj.currentStyle){ return obj.currentStyle[name]; }else{ retu ...

  6. 如何给现有的PDF文件添加页码

    如何给现有的PDF文件添加页码 之前我写了如何打印PDF文件,有人qq问我怎样在打印时给PDF文件添加页码,的确,给PDF文件添加页码,可以帮助我们区分纸质档的PDF文件页面的先后顺序,方便我们对它的 ...

  7. Sql Server 内存相关计数器以及内存压力诊断

    在数据库服务器中,内存是数据库对外提供服务最重要的资源之一, 不仅仅是Sql Server,包括其他数据库,比如Oracle,MySQL等,都是一类非常喜欢内存的应用. 在Sql Server服务器中 ...

  8. IE兼容性问题汇总【持续更新中】

    问题:IE8/9不支持Array.indexOf 解决方案 if (!Array.prototype.indexOf) { Array.prototype.indexOf = function(elt ...

  9. app端上传文件至服务器后台，web端上传文件存储到服务器

    1.android前端发送服务器请求 在spring-mvc.xml 将过滤屏蔽(如果不屏蔽 ,文件流为空) <!-- <bean id="multipartResolver&q ...

  10. Canvas设置width与height 的问题！

    最近因为工作需要,所以就学了一下Html中的Canvas标签. 当我看了一下教程后,自己写了一个hello world的时候,麻烦事就出现了.看下面代码: <!DOCTYPE html> ...