前面讲过《完全使用css编写复选框》,后来在深入学习sass过程中,发现:这种写法虽然也能达到目的,但是稍嫌复杂了一点。这里介绍一种可以说更简单一点的方法,其实也就是html结构更简单一点,就css而言,也差不多吧。

还是以复选框为例吧。

<label><input type="checkbox" name="name" checked />选项一</label>

  其实核心的html结构也就是我们正常使用的input[type=checkbox]的写法,关键在于可以用css清除其默认样式,这是我之前一直忽略或者说完全不知情的一条css语句。

input[type=checkbox]{
-webkit-appearance: none;
appearance: none;
}

  appearance: none;   清除了整个[type=checkbox]的默认样式,由于涉及到兼容性的问题,一般主要用于移动端的清除复选框和单选框的默认样式。

input[type=checkbox]{
-webkit-appearance: none;
appearance: none;
display: inline-block;
cursor: pointer;
vertical-align: middle;
background-repeat: no-repeat;
-webkit-transition: background-position .15s cubic-bezier(.8, 0, 1, 1),
-webkit-transform .25s cubic-bezier(.8, 0, 1, 1);
transition: background-position .15s cubic-bezier(.8, 0, 1, 1),
-webkit-transform .25s cubic-bezier(.8, 0, 1, 1);
outline: none;
width: 24px;
height: 24px;
margin: 0 6px;
background-image: url(default.png);
background-size: 75% 75%;
-webkit-box-shadow: hsla(0,0%,100%, .15) 0 1px 1px, inset hsla(0,0%,0%,.5) 0 0 0 1px;
box-shadow: hsla(0,0%,100%, .15) 0 1px 1px, inset hsla(0,0%,0%,.5) 0 0 0 1px;
border-color: #ff7b11;
}
input[type=checkbox]:checked{
-webkit-transition: background-position .2s .15s cubic-bezier(0, 0, .2, 1),
-webkit-transform .25s cubic-bezier(0, 0, .2, 1);
transition: background-position .2s .15s cubic-bezier(0, 0, .2, 1),
-webkit-transform .25s cubic-bezier(0, 0, .2, 1);
} input[type=checkbox]:active{
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transition: -webkit-transform .1s cubic-bezier(0, 0, .2, 1);
transition: -webkit-transform .1s cubic-bezier(0, 0, .2, 1);
}
input[type=checkbox],
input[type=checkbox]:active,
input[type=checkbox]:checked ~ input[type=checkbox],
input[type=checkbox]:checked ~ input[type=checkbox]:active {
background-position: center -24px;
}
input[type=checkbox]:checked {
background-position: center center;
}

  这就实现自定义的checkbox样式了,再也不用使用各种标签,并通过js模拟来实现简单的单选和复选框的问题了。  

css写复选框的更多相关文章

  1. 完全使用css编写复选框

    在日常的项目中,出现复选框或者单选框,应该都属于常见需求了,最开始阶段,一般只有两种可能性: 一.完全使用  <input type="checkbox" />或者&l ...

  2. CSS 美化复选框 - 无图片方式

    今天和大家分享一个不使用图片美化复选框的方式.来看下效果图吧,如下是3种不同状态下的效果: 一. Html结构 <div class="check-wrap"> < ...

  3. 纯css美化复选框,单选框,滑动条(range)

    <div class="box"> <!-- 借鉴地址:http://www.cnblogs.com/xiaoxianweb/p/5465607.html --& ...

  4. 纯css修改复选框默认样式

    input[type='checkbox']{ width: 20px; height: 20px; background-color: #fff; -webkit-appearance:none; ...

  5. 纯css3单选框/复选框美化样式代码

    纯CSS 单/复选框 美化请选择iPhone 型号 iPhone 6s iPhone 6s Plus iPhone 7 iPhone 7 Plus   选择兴趣爱好 女 绘画 摄影 骑行   原理在这 ...

  6. 不同版本的jquery的复选框checkbox的相关问题

    在尝试写复选框时候遇到一个问题,调试了很久都没调试出来,极其郁闷: IE10,Chrome,FF中,对于选中状态,第一次$('#checkbox').attr('checked',true)可以实现 ...

  7. Django项目:CRM(客户关系管理系统)--35--27PerfectCRM实现King_admin编辑复选框

    #admin.py # ————————01PerfectCRM基本配置ADMIN———————— from django.contrib import admin # Register your m ...

  8. [CSS]复选框单选框与文字对齐问题的研究与解决.

    前言:今天碰到的这个问题, 恰好找到一个很好的博文, 在这里转载过来 学习下. 原文地址:复选框单选框与文字对齐问题的研究与解决. 目前中文网站上面的文字,就我的个人感觉而言,绝大多数网站的主流文字大 ...

  9. 转 纯CSS设置Checkbox复选框控件的样式

    Checkbox复选框是一个可能每一个网站都在使用的HTML元素,但大多数人并不给它们设置样式,所以在绝大多数网站它们看起来是一样的.为什么不把你的网站中的Checkbox设置一个与众不同的样式,甚至 ...

随机推荐

  1. Redis sortedset有效集合数据结构

    1. 增加一个有效集合 2. 查看元素个数 3. zscore 4. zcount 5. 返回指定元素的索引 zrank 6.zincrby 给元素a加90分 7. zrange查看范围

  2. redis String结构

    1. 设置c的过期时间为100s 2. psetex的单位为毫秒 10000毫秒 3. getrange 获得字符的范围 4. getset 先获得旧的值,然后设置新的值 5. 设置多个值 6. 获得 ...

  3. Java MyBatis insert数据库数据后返回主键

    <selectKey keyProperty="id" resultType="java.lang.Long" order="AFTER&quo ...

  4. android 逆向

    用到两个工具 :dex2jar和jd-gui 1,重命名ContactManager.apk为ContactManager.zip并解压得到文件classes.dex: 2,解压dex2jar-0.0 ...

  5. VirtualBox 虚拟机复制

    本文简单讲两种情况下的复制方式 1 跨电脑复制 2 同一virtrul box下 虚拟机复制 ---------------------------------------------- 1 跨电脑复 ...

  6. 黄聪:在.NET中使用GeckoFX 29

    GeckoFX is a .NET control, that works similarly to “System.Windows.Forms.WebBrowser” Control, while ...

  7. Java第05次实验提纲(Java图形界面编程)

    1. Swing与NetBeans 使用NetBeans编写简单界面.见GUI实验参考文件中的0.第06次实验(图形程序设计.事件处理与Swing).doc 题目1: Swing用户界面组件与事件处理 ...

  8. google使用的开源的工具类Thumbnailator图像处理

    maven依赖 <dependency>     <groupId>net.coobird</groupId>     <artifactId>thum ...

  9. Boost--variant (C++中的union)

    union联合体类型的问题 只能用于内部类型,这使得union在C++中几乎没有用 所以boost提供了variant,相当于是C++中的union #include "boost/vari ...

  10. Python——pandas数据处理(python programming)