html

<label>
      <input type="checkbox" class="colored-blue">
      <span class="text">GC-高铁/城际</span>
</label>

css

;;
    width:;}
input[type=checkbox] ~ .text, input[type=radio] ~ .text{;
    display:;line-height: 20px;min-height: 18px;min-width: 18px;
    font-weight: normal;}
input[type=checkbox] ~ .text:before, input[type=radio] ~ .text:before{font-family: fontAwesome;
    font-weight: bold;font-size: 13px;color: #333;content: " ";background-color: #fafafa;
    border:;display: inline-block;
    text-align: center;vertical-align: middle;height: 18px;line-height: 16px;min-width: 18px;margin-right: 5px;
    margin-bottom: 2px;-webkit-transition: all .3s ease;-moz-transition: all .3s ease;-o-transition: all .3s ease;
    transition: all .3s ease;}
input[type=checkbox].colored-blue:checked ~ .text, input[type=radio].colored-blue:checked ~ .text{}
input[type=checkbox]:checked ~ .text:before, input[type=radio]:checked ~ .text:before{
display: inline-block;content: '';background-color: #f5f8fc;-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05),inset 0 -15px 10px -12px rgba(0,0,0,.05),inset 15px 10px -12px rgba(255,255,255,.1);
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,.05),inset 0 -15px 10px -12px rgba(0,0,0,.05),inset 15px 10px -12px rgba(255,255,255,.1);
    box-shadow: 0 1px 2px rgba(0,0,0,.05),inset 0 -15px 10px -12px rgba(0,0,0,.05),inset 15px 10px -12px rgba(255,255,255,.1);
    border-color: #333;}

最终效果

css 更改input radio checkbox的样式的更多相关文章

  1. 利用CSS 修改input=radio的默认样式(改成选择框)

    html部分: <input id="item2" type="radio" name="item"> <label fo ...

  2. 使用<label>标签修改input[type="checkbox"]的样式

    因为<label>的特性有两点 : ①不呈现任何效果, ②用户点击该标签, 浏览器能自动将焦点转移到相关的表单控件上. <form> <input type=" ...

  3. css修改input表单默认样式重置与自定义大全

    链接地址: 伪元素表单控件默认样式重置与自定义大全 http://www.zhangxinxu.com/wordpress/?p=3381 Chrome 现在不支持通过伪元素修改 meter 元素样式 ...

  4. css自定义 range radio select的样式滑轮，按钮，选择框

    写在前面: 之前踩坑css的时候,遇到滑轮,按钮,选择框这类型的东西,为了页面效果,总是需要自定义他们的样式,而不使用他们的默认样式.当时写的时候,我也是蛮头疼的,弄了个demo,链接在下面.对此做个 ...

  5. jquery mobile radio,checkbox button 样式设置

    <label><input type=checkbox ></label>,<input type=checkbox id="checkbox &q ...

  6. 自定义input[type="checkbox"]的样式

    对复选框自定义样式,我们以前一直用的脚本来实现,不过现在可以使用新的伪类 :checkbox 来实现. 如果直接对复选框设置样式,那么这个伪类并不实用,因为没有多少样式能够对复选框起作用.不过,倒是可 ...

  7. vue的表单的简单介绍 input radio checkbox等表单特性

    在vue中我们可以通过v-model来为表单元素实现双向绑定 1:v-model指令 数据的双向绑定 双向绑定是说我们不仅仅可以通过数据(M)的改变去影响视图(V),还是当视图的内容改变(V)去影响模 ...

  8. jquery 获取input radio/checkbox 的值 【注意写法】

    今天,在用jquery获取页面上radio值的时候,radio给出了默认值,但是无论如何修改值,radio始终是默认值,去掉默认值的时候,页面上又报出了undefined的错误.经过几番搜索,发现不同 ...

  9. input radio单选框样式优化

    HTML代码: <form> <div> <input id="item1" type="radio" name="it ...

随机推荐

  1. 基于注解配置spring

    1 对 bean 的标注基于注解方式有3个注解 @Component @Repository 对DAO类进行标注 @Service 对Service类进行标注 @Controller  对Contro ...

  2. hibernate中一对一映射

    一.hibernate中一对一映射有两种 1 主键方式,一张表的主键是通过另一张表的主键生成的 2 外键方式,一张表添加外键引用另一张表的主键,并添加唯一unique约束 二.下面进行简单例子,用户和 ...

  3. 并发登录人数控制--Shiro系列(二)

    为了安全起见,同一个账号理应同时只能在一台设备上登录,后面登录的踢出前面登录的.用Shiro可以轻松实现此功能. shiro中sessionManager是专门作会话管理的,而sessinManage ...

  4. layui关闭layer.open打开的页面

    var index = parent.layer.getFrameIndex(window.name); //获取窗口索引parent.layer.close(index);

  5. CSS3多列布局

    通过 CSS3,您能够创建多个列来对文本进行布局 - 就像报纸那样! 在本章中,您将学习如下多列属性: column-count column-gap column-rule 浏览器支持 属性 浏览器 ...

  6. 使用【单独】的一个<script>进行js文件的引用

    刚才用jQuery的时候,总是发现js代码不被执行...后来发现我的代码是这么写的: <script type="text/javascript" src="htt ...

  7. Flashtext 使用文档 大规模数据清洗的利器-实现文本结构化

    1.1 安装 pip install flashtext 1.2 使用例子 1.2.1 关键字提取 >>> from flashtext import KeywordProcesso ...

  8. js prototype 理解

    简单理解:prototype对象是实现面向对象的一个重要机制.每个函数也是一个对象,它们对应的类就是 function,每个函数对象都具有一个子对象prototype.Prototype 表示了该函数 ...

  9. [C++]在什么时候需要“#include string.h“

    相关资料:https://zhidao.baidu.com/question/515578726.html C++中,string头文件基本上已经包含在iostream中了.但是,平时使用的时候建议加 ...

  10. input 和<fmt:formatDate>的结合使用

    <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %> <inpu ...