纯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提示框”整体加一个 ...
随机推荐
- vim 编辑器 打开GB2312、GBK文件乱码解决方法
安装好的操作系统一般都带有vim编辑器,但是默认不支持GB2312中文,打开文件出现乱码,解决办法如下. 1.打开以下文件 sudo vim /var/lib/locales/supported.d/ ...
- 【memset】关于memset的初始最大最小值
声明:也是摘自网上各路大神的. memset的正规用法是只能用来初始化char类型的数组的,也就是说,它只接受0x00-0xFF的赋值. 因为char是1字节,memset是按照字节赋值的,相当于把每 ...
- C#算法基础之堆排序
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...
- NPOI读取Excel表格类
public class NPOIHelper { private HSSFWorkbook workbook; public static IWorkbook Lo ...
- Unity3d导入工程出现错误“Creating unique file”的解决方法
Unity3d导入工程出现错误“Creating unique file:creating file Temp/tempFile failed.Please ensure there is enoug ...
- Javascript之spry菜单栏
我没有添加任何东西,这是Dreamweaver原汁原味用spry创建的菜单栏,以此来学习菜单导航,哈哈. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTM ...
- Java之绘制实例
前面已经介绍过绘制方法. 弧形的绘制: package com.caiduping; import java.awt.Graphics; import javax.swing.JFrame; impo ...
- HTML+CSS学习笔记（3）- 认识标签（2）
HTML+CSS学习笔记(3)- 认识标签(2) 1.使用ul,添加新闻信息列表 在浏览网页时,你会发现网页上有很多信息的列表,如新闻列表.图片列表, 这些列表就可以使用ul-li标签来完成.ul-l ...
- 动态图片加到UIImageView中
//1.添加一个.gif类型的动态的图片,用到URLForResource方法,gif是图片的格式,FlagZombie是图片的名字 @implementation ViewController- ( ...
- 生成 网站“面包屑” XML
using System; using System.Collections.Generic; using System.IO; using System.Threading; using Syste ...