一、背景

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

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

二、解决方法

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. vue-router2.0 组件之间传参及获取动态参数

    <li v-for=" el in hotLins" > <router-link :to="{path:'details',query: {id:el ...

  2. 03.Web大前端时代之：HTML5+CSS3入门系列~H5功能元素

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 2.功能元素 1.hgroup 对网页或区段(secti ...

  3. ElasticSearch 5学习(8)——分布式文档存储（wait_for_active_shards新参数分析）

    学完ES分布式集群的工作原理以及一些基本的将数据放入索引然后检索它们的所有方法,我们可以继续学习在分布式系统中,每个分片的文档是被如何索引和查询的. 路由 首先,我们需要明白,文档和分片之间是如何匹配 ...

  4. 记2016腾讯 TST 校招面试经历，电面、笔试写代码、技术面、hr面，共5轮

    (出处:http://www.cnblogs.com/linguanh/) 前序: 距离  2016 腾讯 TST 校招面试结束已经5天了,3月27日至今,目前还在等待消息.从投简历到两轮电面,再到被 ...

  5. jvm系列(一):java类的加载机制

    java类的加载机制 1.什么是类的加载 类的加载指的是将类的.class文件中的二进制数据读入到内存中,将其放在运行时数据区的方法区内,然后在堆区创建一个java.lang.Class对象,用来封装 ...

  6. docker对数据卷容器进行备份

    转载请注明出处 官网的数据以及各大博客都没有对这个的具体说明,本人也是理解了好久. 我们使用docker的过程中,使用共享的数据卷是经常的,那么.我们要怎么进行备份呢?   首先,我们得了解下面4个命 ...

  7. scikit-learn预处理实例之一:使用FunctionTransformer选择列

    本例展示怎样在一个管道中使用FunctionTransformer.如果你知道你的数据集的第一主成分与分类任务无关,你可以使用FunctionTransformer选取除PCA转化的数据的第一列之外的 ...

  8. 在web浏览器上显示室内温度（nodeJs+arduino+socket.io）

    上次的nodejs操作arduino入门篇中实现了如何连接arduino.这次我们来实现通过arduino测量室内温度并在浏览器上显示出来. [所需材料] 硬件:LM35温度传感器,arduino u ...

  9. R语言：常用统计检验

    统计检验是将抽样结果和抽样分布相对照而作出判断的工作.主要分5个步骤: 建立假设 求抽样分布 选择显著性水平和否定域 计算检验统计量 判定 -- 百度百科 假设检验(hypothesis test)亦 ...

  10. Linux下history命令用法

    如果你经常使用 Linux 命令行,那么使用 history(历史)命令可以有效地提升你的效率.本文将通过实例的方式向你介绍 history 命令的 15 个用法. 使用 HISTTIMEFORMAT ...