mark: http://blog.meathill.com/tech/fe/create-multiple-select-component-with-pure-css.html

Demo:

小宝3225 王老白白白 空夫31 谷大白话 Meathill 一毛不拔大师

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实现多选组件的更多相关文章

  1. 纯css美化复选框，单选框，滑动条（range）

    <div class="box"> <!-- 借鉴地址:http://www.cnblogs.com/xiaoxianweb/p/5465607.html --& ...

  2. 纯css修改复选框默认样式

    input[type='checkbox']{ width: 20px; height: 20px; background-color: #fff; -webkit-appearance:none; ...

  3. 自定义常用input表单元素二：纯css实现自定义radio单选按钮

    这是接着上一篇纯css自定义复选框checkbox的第二篇,自定义一个radio单选按钮,同样,采用css伪类和"+"css选择器为思路,下面是预览图: 下面直入主题放代码:HTM ...

  4. 自定义常用input表单元素一：纯css 实现自定义checkbox复选框

    最下面那个是之前写的  今天在做项目的时候发现,之前写的貌似还是有点多,起码增加的span标签可以去掉,这样保持和原生相同的结构最好的,仅仅是样式上的变化.今天把项目中的这个给更新上来.下面就直接还是 ...

  5. radio样式的写法，单选和多选如何快速的改变默认样式，纯CSS，

    一.纯CSS写法改变单选框的默认选择样式,用背景图片代替 input[type='radio']:radio:before { content: '';//这里需要有 width: 20px; hei ...

  6. 纯CSS菜单样式，及其Shadow DOM，Json接口 实现

    先声明,要看懂这篇博客要求你具备少量基础CSS知识, 当然如果你只是要用的话就随便了,不用了解任何知识 完整项目github链接:https://github.com/git-Code-Shelf/M ...

  7. iHover – 30+ 纯 CSS 实现的超炫的图片悬停特效

    iHover 是一个令人印象深刻的图片悬停效果集合,完全基于 CSS3 实现,无依赖,能够搭配 Bootstrap 3 很好地工作.基于 SCSS 技术构建,便于修改变量.有模块化的代码,无需包含整个 ...

  8. 10分钟使用纯css实现完整的响应式导航菜单栏的效果

    在开发hexo主题pixel的时候没有选择bootstrap和jquery实现响应式菜单,而是 使用了纯css实现响应式菜单,这个想法来自于You-Dont-Need-Javascript, 这个项目 ...

  9. 纯CSS实现tooltip提示框，CSS箭头及形状之续篇--给整个tooltip提示框加个边框

    在前面一篇中我们介绍了纯CSS实现tooltip提示框,通俗的讲也就是CSS箭头及形状 不过注意一点是,他始终是一个元素,只是通过CSS实现的,今天我们要说的是给这个“tooltip提示框”整体加一个 ...

随机推荐

  1. 2012第二届GIS制图大赛——公开课技术问题&答疑（珍贵资源哦！）（http://blog.csdn.net/arcgis_all/article/details/8216984）

    本次制图大赛培训的公开课结束后,我们把所有技术问题收集并进行统一解答,现将这些资料在博文中分享. 由于这些问题涉及了制图技术中较多普遍性的内容,因此是非常珍贵的资源,希望能对大家有帮助. ——符号及符 ...

  2. 使用在storyBoard之外的xib创建对象

    1.在storyBoard之外的xib 要注意的是:TableView的代理一定要设置为FilesOwner 使用: 方式一: 直接创建对象如下,(如果要使用xib里的控件,那么就要将xib里的控件作 ...

  3. PureCSS框架

    http://www.tuicool.com/articles/iyiI32 Pure中的主要组件包括: 一个响应式网格,可根据需求定制. 一个基于 Normalize.css 的基础库,用于修复跨浏 ...

  4. SQL Server:替换文本中的回车和换行符

    --替换回车符 update master_locationSET street_number = REPLACE(street_number, CHAR(13), '') --替换换行符 updat ...

  5. php核心知识要点

    Php:脚本语言,网站建设,服务器端运行 PHP定义:一种服务器端的 HTML 脚本/编程语言,是一种简单的.面向对象的.解释型的.健壮的.安全的.性能非常之高的.独立于架构的.可移植的.动态的脚本语 ...

  6. Java Concurrency - Concurrent Collections

    Data structures are a basic element in programming. Almost every program uses one or more types of d ...

  7. Maven搭建SpringMVC+Hibernate项目详解

    前言 今天复习一下SpringMVC+Hibernate的搭建,本来想着将Spring-Security权限控制框架也映入其中的,但是发现内容太多了,Spring-Security的就留在下一篇吧,这 ...

  8. Entity Framework 6.1 学习系列1--概况、安装

    原文:Entity Framework 6.1 学习系列1--概况.安装 Entity Framework:实体框架,看名字就知道是针对模型数据的.这是MS推出的一款ORM工具. 与NHibernat ...

  9. 第六十六篇、OC_Sqlite数据库操作

    #import <Foundation/Foundation.h> #import <sqlite3.h> #define kFilename @"data.sqli ...

  10. IOS 下拉菜单

    由于之前曾经用到过下拉菜单,所以现在花一些时间回过头来细细整理了一下,逐步完善这个下拉菜单,并提供一些比较基本的功能,以便日后如果有需要的话可以进行复用,并提供给需要的人参考.下拉菜单同样分为数据源和 ...