纯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提示框”整体加一个 ...
随机推荐
- JS 控制文本框只能输入中文、英文、数字与指定特殊符号
想做姓名输入的js判断是否是中文,但是网上找的很多是源于一篇文章的,判断中文的正则式不对,后来找到一个可以准确判断了,但是是监测里面有中文的就行,跟我想要的只能输入中文的意思相左,所以又找了下面的 J ...
- HDU 1160 FatMouse's Speed (DP)
FatMouse's Speed Time Limit:1000MS Memory Limit:32768KB 64bit IO Format:%I64d & %I64u Su ...
- Laravel_Elixir_gulp任务利器安装
目录 说明 安装 1安装gulp 2安装Elixir 3Elixir快速入门 4合并cssjs 5版本控制version 6复制copy 7方法串联 1.说明 详细说明暂时省略,后期补充.小白的角度理 ...
- DataTables手动带参数提交至服务器
一:参数传递及接收 JavaScript: 黄背景部分为参数传递关键 <script type="text/javascript"> var table; var de ...
- ASP.NET中在不同的子域中共享Session
天遇到了这个问题,于是研究了一下.要解决这个问题,首先就要明白一些Session的机理.Session在服务器是以散列表形式存在的,我们都知道Session是会话级的,每个用户访问都会生成一个Sess ...
- ios中Raw文件系统常用文件夹
1.[/Applications] 常用软件的安装目录 2.[/Applications/Preferences.app/zh_CN.lproj] 软件Preferences.app的中文汉化文件存放 ...
- C#_简单Excel导入
引用程序集 Microsoft.Office.Core Microsoft.Office.Interop.Excel using System; using System.Collections.Ge ...
- 相似度到大数据查找之Mysql 文章匹配的一些思路与提高查询速度
文章相关度匹配的一些思路---"压缩"预料库,即提取用特征词或词频,量化后以“列向量”形式保存到数据库:按前N组词拼为向量组供查询使用,即组合为1到N字的组合,量化后以“行向量”形 ...
- C#学习笔记之线程 - 高级主题：非阻塞同步
非阻塞同步 - Nonblock Synchronization 前面提到,即使在简单的赋值和增加一个字段的情况下也需要处理同步.尽管,使用锁可以完成这个功能,但是锁必定会阻塞线程,需要线程切换,在高 ...
- NS-Date/NSDateFormatter
// // main.m // NS-Date // // Created by qianfeng on 15/6/23. // Copyright (c) 2015年 qianfeng. All r ...