css 更改input radio checkbox的样式
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的样式的更多相关文章
- 利用CSS 修改input=radio的默认样式(改成选择框)
html部分: <input id="item2" type="radio" name="item"> <label fo ...
- 使用<label>标签修改input[type="checkbox"]的样式
因为<label>的特性有两点 : ①不呈现任何效果, ②用户点击该标签, 浏览器能自动将焦点转移到相关的表单控件上. <form> <input type=" ...
- css修改input表单默认样式重置与自定义大全
链接地址: 伪元素表单控件默认样式重置与自定义大全 http://www.zhangxinxu.com/wordpress/?p=3381 Chrome 现在不支持通过伪元素修改 meter 元素样式 ...
- css自定义 range radio select的样式滑轮,按钮,选择框
写在前面: 之前踩坑css的时候,遇到滑轮,按钮,选择框这类型的东西,为了页面效果,总是需要自定义他们的样式,而不使用他们的默认样式.当时写的时候,我也是蛮头疼的,弄了个demo,链接在下面.对此做个 ...
- jquery mobile radio,checkbox button 样式设置
<label><input type=checkbox ></label>,<input type=checkbox id="checkbox &q ...
- 自定义input[type="checkbox"]的样式
对复选框自定义样式,我们以前一直用的脚本来实现,不过现在可以使用新的伪类 :checkbox 来实现. 如果直接对复选框设置样式,那么这个伪类并不实用,因为没有多少样式能够对复选框起作用.不过,倒是可 ...
- vue的表单的简单介绍 input radio checkbox等表单特性
在vue中我们可以通过v-model来为表单元素实现双向绑定 1:v-model指令 数据的双向绑定 双向绑定是说我们不仅仅可以通过数据(M)的改变去影响视图(V),还是当视图的内容改变(V)去影响模 ...
- jquery 获取input radio/checkbox 的值 【注意写法】
今天,在用jquery获取页面上radio值的时候,radio给出了默认值,但是无论如何修改值,radio始终是默认值,去掉默认值的时候,页面上又报出了undefined的错误.经过几番搜索,发现不同 ...
- input radio单选框样式优化
HTML代码: <form> <div> <input id="item1" type="radio" name="it ...
随机推荐
- Python 爬虫实例(2)—— 爬取今日头条
# coding:utf-8 import base64 import random, re import sqlite3 import redis, pickle import json, time ...
- spring in action 9.1 spring security
spring security是基于spring AOP 和 Servlet 规范中的Filter 实现的安全框架. Spring Security 是为基于 Spring 的应用程序提供声明式安全保 ...
- sql server数据库查询超时报错
报错信息如下: 链接服务器"DBJointFrame"的 OLE DB 访问接口 "SQLNCLI10" 返回了消息 "查询超时已过期". ...
- unity, do nothing的state
要想在animator的stateMachine中建一个"doNothing",要注意:为了保证"doNothing"state能正常运转,不被无故跳过, Mo ...
- mysql远程登录出错的解决方法
mysql远程登录出错的情况,先比很多朋友都有遇到过吧,下面有个不错的解决方法,大家可以参考下. 错误:ERROR 2003 (HY000): Can't connect to MySQL serve ...
- Debian8.0 搭建leanote
参考了官方wiki以及中文博客 https://github.com/leanote/leanote/wiki http://leanote.leanote.com/post/Leanote-manu ...
- Ubuntu设置中文-以及-安装拼音输入法
2017-11-12更新 安装搜狗拼音: http://blog.csdn.net/iamplane/article/details/70447517 ------------------------ ...
- java常用操作
1.properties文件中文转换 在cmd中进入到文件所在目录执行(其他操作请见命令帮助):native2ascii -reverse messages_zh_CN.properties b.t ...
- elasticsearch安装与使用(3)-- 安装中文分词插件elasticsearch-analyzer-ik
前言 elasticsearch(下面简称ES,安装ES点击这里)的自带standard分词只能把汉语分割成一个个字,而不能分词.分段,这就是我们需要分析器ik的地方了. http://{ip}:92 ...
- JavaScript实现网页安全登录(转)
现在很多商业网站的用户登录都是明码传输的,而一般用户又习惯于所有帐号使用相同的密码来保存,甚至很多人使用的密码和自己的银行帐号都一样哦!所 以嘛还是有一定的安全隐患的,YAHOO的免费邮箱登录使用了M ...