css写复选框
前面讲过《完全使用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写复选框的更多相关文章
- 完全使用css编写复选框
在日常的项目中,出现复选框或者单选框,应该都属于常见需求了,最开始阶段,一般只有两种可能性: 一.完全使用 <input type="checkbox" />或者&l ...
- CSS 美化复选框 - 无图片方式
今天和大家分享一个不使用图片美化复选框的方式.来看下效果图吧,如下是3种不同状态下的效果: 一. Html结构 <div class="check-wrap"> < ...
- 纯css美化复选框,单选框,滑动条(range)
<div class="box"> <!-- 借鉴地址:http://www.cnblogs.com/xiaoxianweb/p/5465607.html --& ...
- 纯css修改复选框默认样式
input[type='checkbox']{ width: 20px; height: 20px; background-color: #fff; -webkit-appearance:none; ...
- 纯css3单选框/复选框美化样式代码
纯CSS 单/复选框 美化请选择iPhone 型号 iPhone 6s iPhone 6s Plus iPhone 7 iPhone 7 Plus 选择兴趣爱好 女 绘画 摄影 骑行 原理在这 ...
- 不同版本的jquery的复选框checkbox的相关问题
在尝试写复选框时候遇到一个问题,调试了很久都没调试出来,极其郁闷: IE10,Chrome,FF中,对于选中状态,第一次$('#checkbox').attr('checked',true)可以实现 ...
- Django项目:CRM(客户关系管理系统)--35--27PerfectCRM实现King_admin编辑复选框
#admin.py # ————————01PerfectCRM基本配置ADMIN———————— from django.contrib import admin # Register your m ...
- [CSS]复选框单选框与文字对齐问题的研究与解决.
前言:今天碰到的这个问题, 恰好找到一个很好的博文, 在这里转载过来 学习下. 原文地址:复选框单选框与文字对齐问题的研究与解决. 目前中文网站上面的文字,就我的个人感觉而言,绝大多数网站的主流文字大 ...
- 转 纯CSS设置Checkbox复选框控件的样式
Checkbox复选框是一个可能每一个网站都在使用的HTML元素,但大多数人并不给它们设置样式,所以在绝大多数网站它们看起来是一样的.为什么不把你的网站中的Checkbox设置一个与众不同的样式,甚至 ...
随机推荐
- Redis sortedset有效集合数据结构
1. 增加一个有效集合 2. 查看元素个数 3. zscore 4. zcount 5. 返回指定元素的索引 zrank 6.zincrby 给元素a加90分 7. zrange查看范围
- redis String结构
1. 设置c的过期时间为100s 2. psetex的单位为毫秒 10000毫秒 3. getrange 获得字符的范围 4. getset 先获得旧的值,然后设置新的值 5. 设置多个值 6. 获得 ...
- Java MyBatis insert数据库数据后返回主键
<selectKey keyProperty="id" resultType="java.lang.Long" order="AFTER&quo ...
- android 逆向
用到两个工具 :dex2jar和jd-gui 1,重命名ContactManager.apk为ContactManager.zip并解压得到文件classes.dex: 2,解压dex2jar-0.0 ...
- VirtualBox 虚拟机复制
本文简单讲两种情况下的复制方式 1 跨电脑复制 2 同一virtrul box下 虚拟机复制 ---------------------------------------------- 1 跨电脑复 ...
- 黄聪:在.NET中使用GeckoFX 29
GeckoFX is a .NET control, that works similarly to “System.Windows.Forms.WebBrowser” Control, while ...
- Java第05次实验提纲(Java图形界面编程)
1. Swing与NetBeans 使用NetBeans编写简单界面.见GUI实验参考文件中的0.第06次实验(图形程序设计.事件处理与Swing).doc 题目1: Swing用户界面组件与事件处理 ...
- google使用的开源的工具类Thumbnailator图像处理
maven依赖 <dependency> <groupId>net.coobird</groupId> <artifactId>thum ...
- Boost--variant (C++中的union)
union联合体类型的问题 只能用于内部类型,这使得union在C++中几乎没有用 所以boost提供了variant,相当于是C++中的union #include "boost/vari ...
- Python——pandas数据处理(python programming)