纯CSS实现多选组件
mark: http://blog.meathill.com/tech/fe/create-multiple-select-component-with-pure-css.html
Demo:
Code:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#container {
display:flex;
flex-direction:row;
flex-wrap:wrap;
}
#container input,
#container label {
order: 2;
}
input[type=checkbox]:checked,
input[type=checkbox]:checked + label {
order: 0 !important;
}
hr {
display:none;
order: 1;
width:100%;
}
input[type=checkbox]:checked ~ hr {
display:block;
}
input[type=checkbox] {
display: none;
}
label {
min-width: 120px;
border: 1px solid #CCC;
padding: 2px 8px;
text-align: center;
margin: 0 5px 5px 0;
background: #FFF;
color: #333;
border-radius: 3px;
box-sizing: border-box;
}
label:hover {
border-color: #ADADAD;
background: #EBEBEB;
cursor: pointer;
}
input[type=checkbox]:checked + label {
order: 0;
background-color: #428BCA;
border-color: #357EBD;
color: #FFF;
}
input[type=checkbox]:checked + label:hover {
background-color: #327681;
border-color: #285E8E;
}
label:before {
display: inline;
content: "+ ";
font-size: 100%;
}
input[type=checkbox]:checked + label:before {
display: inline;
content: "- ";
font-size: 100%;
}
input[type=checkbox]:checked + label {
-webkit-transition: background-color 1s;
-moz-transition: background-color 1s;
-ms-transition: background-color 1s;
-o-transition: background-color 1s;
transition: background-color 1s;
}
</style>
</head>
<body>
<div id="container">
<input type="checkbox" name="q[]" id="q1">
<label for="q1">小宝3225</label>
<input type="checkbox" name="q[]" id="q2">
<label for="q2">王老白白白</label>
<input type="checkbox" name="q[]" id="q3">
<label for="q3">空夫31</label>
<input type="checkbox" name="q[]" id="q4">
<label for="q4">谷大白话</label>
<input type="checkbox" name="q[]" id="q5">
<label for="q5">Meathill</label>
<input type="checkbox" name="q[]" id="q6">
<label for="q6">一毛不拔大师</label>
<hr>
</div>
</body>
</html>
纯CSS实现多选组件的更多相关文章
- 纯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; ...
- 自定义常用input表单元素二：纯css实现自定义radio单选按钮
这是接着上一篇纯css自定义复选框checkbox的第二篇,自定义一个radio单选按钮,同样,采用css伪类和"+"css选择器为思路,下面是预览图: 下面直入主题放代码:HTM ...
- 自定义常用input表单元素一：纯css 实现自定义checkbox复选框
最下面那个是之前写的 今天在做项目的时候发现,之前写的貌似还是有点多,起码增加的span标签可以去掉,这样保持和原生相同的结构最好的,仅仅是样式上的变化.今天把项目中的这个给更新上来.下面就直接还是 ...
- radio样式的写法，单选和多选如何快速的改变默认样式，纯CSS，
一.纯CSS写法改变单选框的默认选择样式,用背景图片代替 input[type='radio']:radio:before { content: '';//这里需要有 width: 20px; hei ...
- 纯CSS菜单样式，及其Shadow DOM，Json接口 实现
先声明,要看懂这篇博客要求你具备少量基础CSS知识, 当然如果你只是要用的话就随便了,不用了解任何知识 完整项目github链接:https://github.com/git-Code-Shelf/M ...
- iHover – 30+ 纯 CSS 实现的超炫的图片悬停特效
iHover 是一个令人印象深刻的图片悬停效果集合,完全基于 CSS3 实现,无依赖,能够搭配 Bootstrap 3 很好地工作.基于 SCSS 技术构建,便于修改变量.有模块化的代码,无需包含整个 ...
- 10分钟使用纯css实现完整的响应式导航菜单栏的效果
在开发hexo主题pixel的时候没有选择bootstrap和jquery实现响应式菜单,而是 使用了纯css实现响应式菜单,这个想法来自于You-Dont-Need-Javascript, 这个项目 ...
- 纯CSS实现tooltip提示框，CSS箭头及形状之续篇--给整个tooltip提示框加个边框
在前面一篇中我们介绍了纯CSS实现tooltip提示框,通俗的讲也就是CSS箭头及形状 不过注意一点是,他始终是一个元素,只是通过CSS实现的,今天我们要说的是给这个“tooltip提示框”整体加一个 ...
随机推荐
- hibernate 入门案例
1,创建工程,导入jar ojdbc14.jar 数据库驱动包,我用的是oracle数据库,根据实际的数据库选择驱动包 创建java类,并利用bibernate插件完成orm映射,创建hbm.xml ...
- oracle锁
1.概念 数据库中有两种基本的锁类型:排它锁(Exclusive Locks,即X锁)和共享锁(Share Locks,即S锁). 当数据对象被加上排它锁时,其他的事务不能对它读取和修改:加了共享锁的 ...
- Active Session History (ASH) Performed An Emergency Flush Messages In The Alert Log
Active Session History (ASH) Performed An Emergency Flush Messages In The Alert Log (文档 ID 1385872.1 ...
- CF Drazil and Factorial (打表)
Drazil and Factorial time limit per test 2 seconds memory limit per test 256 megabytes input standar ...
- 随机提取N条记录[多种数据库方法]
随机提取10条记录的例子: Sql server: select top 10 * from 表 order by newid() Access: SELECT top 10 * FROM 表 ORD ...
- VR开发中性能问题—OculusWaitForGPU
http://blog.csdn.net/cartzhang/article/details/50788894 VR开发中性能问题-OculusWaitForGPU 本文章由cartzhang编写,转 ...
- In-App-Purcharse 官方原文摘要笔记
这并不是一篇关于 In-App-Purcharse 的专业深入分析文章,只是在初次浏览有关IAP官方文档后记录的一些需要注意的地方,就像是课堂笔记. 因为这是原版.并且涉及到支付的内容,所以就不翻译, ...
- javascript笔记——jikeytang javascript前端群 389875212 精华总结
网址: https://github.com/jsfront // http://www.kancloud.cn/jsfront/month/82796 内容: 前端js github总结, ...
- GDI+
1, 编译error的话一般是却 #include <comdef.h>#include <Windows.h> Windows.h内会包含Windows.h,但是因为在std ...
- 引用、return
C语言中没有引用,引用(reference)是c++对c语言的重要扩充.通俗点说,引用就是“起别名”.比如变量data,和它的引用 RefData.虽然名字不同,但是操作他们的时候,都操作的是相同的内 ...