纯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提示框”整体加一个 ...
随机推荐
- 《MFC游戏开发》笔记二 建立工程、调整窗口
本系列文章由七十一雾央编写,转载请注明出处. http://blog.csdn.net/u011371356/article/details/9300383 作者:七十一雾央 新浪微博:http:/ ...
- 有关ftp4j的FTPListParseException异常
昨天换了个ftp服务器,发现程序出现了异常it.sauronsoftware.ftp4j.FTPListParseException,网上搜了下,说是FTPClient.list()时it.sauro ...
- JDBC的批量查询报告内存溢出解决方法
由于表中的数据过多(我的超过了50W+),查询select * from table ....报告内存溢出 Exception in thread "main" java.lang ...
- [改善Java代码]静态变量一定要先声明后赋值
建议32: 静态变量一定要先声明后赋值 这标题看着让人很纳闷,什么叫做变量一定要先声明后赋值?Java中的变量不都是先声明后使用的吗?难道还能先使用后声明?能不能暂且不说,我们先来看一个例子,代码如下 ...
- 关于JDK中的运算符和变量
类名首字母必须大写.多个单词组成的类名,每个单词的首字母大写. 只要起名称就要让他有意义.Java中的关键字都是由小写字母组成的. 在项目中给标示符起名字在公司中大都有固定的规则.一般加上标示符和$符 ...
- HDOJ2022海选女主角
海选女主角 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Submi ...
- 每天一道LeetCode--326. Power of Three
Given an integer, write a function to determine if it is a power of three. Follow up:Could you do it ...
- javaweb 乱码总结
可能的错误地方: 1.jsp页面编码 2.表单编码 3.servlet可接受编码 4.tomcat中server.xml文件中的指定编码 所有的编码要统一,一般使用“UTF-8”比较好 我最近一次出错 ...
- jQuery实现CheckBox全选、全不选
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- java运算符新用法和^新认识
public class Demo1 { public static void main(String[] args) { boolean t = false | true; System.out.p ...