完全使用css编写复选框
在日常的项目中,出现复选框或者单选框,应该都属于常见需求了,最开始阶段,一般只有两种可能性:
一、完全使用 <input type="checkbox" />或者<input type="radio" />完成复选框和单选框,如此,就必须接受不同的浏览器对input[type=checkbox]或者input[type=radio]的默认定义,基本上没办法对其默认样式进行修改。
二、使用js模拟,使用任意的html标签,如span,定义一个默认样式和选中之后的样式,然后点击之后,判断其是选中还是取消选中,在这种情况下,就得对单选和复选写不同的js,虽说这一小段js并不困难,但是在项目中多处使用复选和单选的时候,终归是比较繁琐的。
css3出现以后,在能够兼容css3设备或者浏览器上,就出现了第三种可能性,使用css3编写自定义的单选框或者复选框,而且不涉及任何一段js代码。
类似于如此,不适用任何js的自定义一个选中状态的复选框,是重构同学心中一直以来的一个梗吧。
<label class="multiple">
<input type="checkbox"><span></span>
</label>
html其实很简单,就是在<input type="checkbox" />后面新增一个可以自定义样式的标签span
.multiple input[type=checkbox] {
visibility: hidden;
position: absolute;
z-index: 20;
left: 0;
}
.multiple input[type=checkbox] + span {
display: inline-block;
vertical-align: middle;
width: 16px;
height: 16px;
border: solid 1px #898989;
background-color: #f8f8f8;
border-radius: 2px;
margin-right: 10px;
position: relative;
}
.multiple input[type=checkbox]:checked + span:before {
content: "";
position: absolute;
left: -2px; right: -2px;
top: -2px; bottom: -2px;
z-index: 3;
background: url(../images//selected.png) no-repeat center center;
}
稍微解释几个关键点:
visibility: hidden; 功能类似于display:none;也是对元素进行隐藏,区别于display:none;的地方在于,使用visibility: hidden; 隐藏的元素,是占位的。可以在网上查一下关于隐藏元素的几种方式,应该会有所收获的。不知道为什么,使用这种方式隐藏的input[type=checkbox],在IE8上没办法点击到。
input[type=checkbox] + span +选择符,是css2提供的选择符,表示选择input[type=checkbox]后面的那个span标签。
input[type=checkbox]:checked + span 表示被选中的checkbox后面的span,这就出现了自定义的可能性。 伪类:checked属于css3选择器,所以IE8及以下兼容不了。
完全使用css编写复选框的更多相关文章
- css写复选框
前面讲过<完全使用css编写复选框>,后来在深入学习sass过程中,发现:这种写法虽然也能达到目的,但是稍嫌复杂了一点.这里介绍一种可以说更简单一点的方法,其实也就是html结构更简单一点 ...
- 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 选择兴趣爱好 女 绘画 摄影 骑行 原理在这 ...
- Django项目:CRM(客户关系管理系统)--35--27PerfectCRM实现King_admin编辑复选框
#admin.py # ————————01PerfectCRM基本配置ADMIN———————— from django.contrib import admin # Register your m ...
- CSS学习笔记三:自定义单选框,复选框,开关
一点一点学习CCS,这次学习了如何自定义单选框,复选框以及开关. 一.单选框 1.先写好body里面的样式,先写几个框 <body> <div class="radio-1 ...
- [CSS]复选框单选框与文字对齐问题的研究与解决.
前言:今天碰到的这个问题, 恰好找到一个很好的博文, 在这里转载过来 学习下. 原文地址:复选框单选框与文字对齐问题的研究与解决. 目前中文网站上面的文字,就我的个人感觉而言,绝大多数网站的主流文字大 ...
- 转 纯CSS设置Checkbox复选框控件的样式
Checkbox复选框是一个可能每一个网站都在使用的HTML元素,但大多数人并不给它们设置样式,所以在绝大多数网站它们看起来是一样的.为什么不把你的网站中的Checkbox设置一个与众不同的样式,甚至 ...
随机推荐
- chmod修改权限
1.命令简介 chmod(Change mode) 用来将每个文件的模式更改为指定值.Linux/Unix 的档案调用权限分为三级 : 档案拥有者.群组.其他. u :目录或者文件的当前的用户 g : ...
- Maven 环境隔离实践
现在将SpringMVC中Maven环境隔离实践总结如下: 1. 在pom中配置 <resources> <resource> <directory>src/mai ...
- 根据数据库结构生成TreeView
procedure TUIOperate.FillTree(treeview: TTreeView); var findq: TADOQuery; node: TTreeNode; //这个方法是根据 ...
- 自定义Write节点的afterrender属性
由于nuke中的write节点提供了beforerender,afterrender这类事件,我们想添加一些功能只需要在这里面敲入代码即可.事件一旦发生,自然会触发我们敲入的co de. Nuke ...
- SQL Server孤立账户解决办法
选择你想要的数据库. 执行 exec sp_change_users_login 'UPDATE_ONE','用户名','登录名' 假如你的登录名是:sd exec sp_change_users_l ...
- Global配置接口访问日志以及测试日志记录
在客户端请求接口时,经常会出现接口相应慢,接口等待超时,接口错误,为了这事相信不少后台开发者为此背锅,记下请求日志,拿出有力证据这才是关键. 1.接口请求错误记录 很多时候接口请求出现的500,404 ...
- 找出N个无序数中第K大的数
使用类似快速排序,执行一次快速排序后,每次只选择一部分继续执行快速排序,直到找到第K个大元素为止,此时这个元素在数组位置后面的元素即所求 时间复杂度: 1.若随机选取枢纽,线性期望时间O(N) 2.若 ...
- HDOJ 2007 平方和与立方和
#include<iostream> #include<algorithm> using namespace std; int main() { int m, n; while ...
- [UE4]位移和形变 Render Transform
任何UI控件都有Render Transform属性. 一.Transform,对应游戏场景中的Transform 1.Translation:位置,平移.对应游戏场景的Transform中的Lo ...
- [UE4]Set Skeletal Mesh,在蓝图中设置骨骼模型