纯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提示框”整体加一个 ...
随机推荐
- CAML query for Group by count and data
CAML query for Group by count and data Company Category Product Name Microsoft Developer Visual Stud ...
- Samba服务详解
Samba文件服务器 本章结构 服务简介 SMB协议 Server Message Block,服务消息块 CIFS协议 Common Internet File System,通用互联网文件系统 S ...
- Linux中ifcfg-eth0配置参数解释
Linux中设置IP地址经常使用到ifcfg-eth0这个文件. vi /etc/sysconfig/network-scripts/ifcfg-eth0 附录文件中的内容: DEVICE=eth0 ...
- VS操作Sqlite数据库
如果你下载的Sqlite是不带bundle的版本,那还要把这个SQLite.Interop.dll复制到debug执行文件夹下才能执行.
- SharePoint 2013 网站定义中添加页面布局
今天在Visual Studio 2012中将页面布局打包到网站定义中. 新建Module “MasterPageGallary” 在Element中如下: <Elements xmlns=&q ...
- ActiveMQ(5.10.0) - Building a custom security plug-in
If none of any built-in security mechanisms works for you, you can always build your own. Though the ...
- Redis 命令 - Sorted Sets
ZADD key score member [score member ...] Add one or more members to a sorted set, or update its scor ...
- 修改msconfig->引导->高级选项-》最大内存为512M
本来想开机提速的!手贱 把 最大内存设置成了512M 结果开机悲剧了,启用了微软的自动修复也不能解决问题!最后是WIN7 PE系统下直接修复boot结果了.遇到这种问题的朋友们可以试试喔
- 第六十六篇、OC_Sqlite数据库操作
#import <Foundation/Foundation.h> #import <sqlite3.h> #define kFilename @"data.sqli ...
- 关于iOS9中配置App Transport Security(应用程序传输安全协议)
在 在info.plist中,进行上面的配置就行了,注意的是,那个网址,你需要访问什么网址,就填写什么网址就行了. NSTemporaryExceptionAllowsInsecureHTTPLoad ...