使用css修改radio、checkbox样式
- input[type=radio],input[type=checkbox] {
- display: inline-block;
- vertical-align: middle;
- width: 20px;
- height: 20px;
- margin-left: 5px;
- -webkit-appearance: none;
- background-color: transparent;
- border: 0;
- outline: 0 !important;
- line-height: 20px;
- color: #d8d8d8;
- }
- input[type=radio]:after {
- content: "";
- display:block;
- width: 20px;
- height: 20px;
- border-radius: 50%;
- text-align: center;
- line-height: 14px;
- font-size: 16px;
- color: #fff;
- border: 2px solid #ddd;
- background-color: #fff;
- box-sizing:border-box;
- }
- input[type=checkbox]:after {
- content: "";
- display:block;
- width: 20px;
- height: 20px;
- text-align: center;
- line-height: 14px;
- font-size: 16px;
- color: #fff;
- border: 2px solid #ddd;
- background-color: #fff;
- box-sizing:border-box;
- }
- input[type=checkbox]:checked:after {
- border: 4px solid #ddd;
- background-color: #37AF6E;
- }
- input[type=radio]:checked:after {
- content: "L";
- transform:matrix(-0.766044,-0.642788,-0.642788,0.766044,0,0);
- -webkit-transform:matrix(-0.766044,-0.642788,-0.642788,0.766044,0,0);
- border-color: #37AF6E;
- background-color: #37AF6E;
- }
使用css修改radio、checkbox样式的更多相关文章
- 【CSS】自定义checkbox样式
修改原生checkbox样式. 效果 原理 1.利用CSS3属性 appearance. 该属性(强制)更改(改变)默认(原生)样式. Firefox 支持替代的 -moz-appearance 属性 ...
- css修改placeholder的样式
css修改placeholder的样式 input::-webkit-input-placeholder { /* WebKit browsers */ font-size:14px; color: ...
- 自定义radio/checkbox样式
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- css 模拟radio的样式
1.input 默认的 type 为 radio的样式,在具体场合中的改造 默认的样式这样: 但是我要这样的: 这样看来是不是比原来的好看多了. 2.优化radio的样式 <span class ...
- sencha touch 扩展篇之使用sass自定义主题样式 (下)通过css修改官方组件样式以及自定义图标
上一讲我们讲解了如何使用官方的api来修改主题样式,这讲我们继续讲解sass的样式修改, 编译官方自带的主题包 在生成的项目以及官方sdk的目录下,自带了一些主题sass包,我们也可以通过修改sas ...
- CSS 美化radio checkbox
CSS 样式 <style type="text/css"> .option-input { -webkit-appearance: none; -moz-appear ...
- 小程序 之修改radio默认样式
一.效果图 二.代码 /* 选中后的 背景样式 (红色背景 无边框 可根据UI需求自己修改) */ radio .wx-radio-input.wx-radio-input-checked { bor ...
- css修改滚动条默认样式
之前因为公司项目需要,在网上找到的: 直接上代码了 html代码 <div class="inner"> <div class="innerbox&qu ...
- css修改select默认样式
先来看看效果图: css: <style media="screen"> .select_demo, .select_list { width: 400px; heig ...
随机推荐
- JavaNIO阻塞IO添加服务器反馈
package com.java.NIO; import java.io.IOException; import java.net.InetSocketAddress; import java.nio ...
- scroll 区域滚动
网页内都有快速滚动和回弹的效果: overflow: scroll; -webkit-overflow-scrolling: touch; 实际上,Safari用了原生控件来实现,对于有-webk ...
- VS2015 使用Xunit来进行单元测试
安装Xunit: Xunit的安装现在不需要插件支持了,直接使用NuGet安装如下两个库即可: PM> Install-Package xunit PM> Install-Package ...
- NOIP2017衢二中旅游记Day 1
NOIP前一天下午早早的去了衢州: 车程大概在4个半小时左右: 车上大家都一脸颓废,并混杂着动听的音乐: 到了衢州二中,立刻跑去吃晚饭: 吃饭的队伍特别长,吃面的却空无一人: 我毅然决然地选择了去吃面 ...
- Mac_Homebrew
Homebrew作为OS X上强大的包管理器,为系统软件提供了非常方便的安装方式,独特式的解决了包的依赖问题,并不再需要烦人的sudo,一键式编译,无参数困扰,真的,你值得拥有. brew 的安装: ...
- Python之子进程subprocess模块
http://www.cnblogs.com/vamei/archive/2012/09/23/2698014.html http://blog.csdn.net/jgood/article/deta ...
- [转]Oracle执行计划详解
Oracle执行计划详解 --- 作者:TTT BLOG 本文地址:http://blog.chinaunix.net/u3/107265/showart_2192657.html --- 简介: ...
- PHP设计模式之工厂模式
工厂模式(Factory pattern)和单例模式一样,是另外一种创建型模式. 和单例模式不同的是,单例模式会创建和管理一个单独的类型的单一对象,工厂模式则是用于创建多种不同类型的类的多个对象. 工 ...
- django 前端请求跨域问题解决
django 前端请求跨域问题解决 笔者之前在做django-restful-api开发的时候,在前端请求页面发送请求的时候直接出现301,域名重定向的问题,经过一番查阅资料,终于得到了非常完美的解决 ...
- 方法的形参、ref参数、out参数的区别
我们在定义方法时,经常会涉及到传参.因为引用类型的数据在用变量存储时,是存储的地址,所以在传参时,依然是传递的地址,但是值类型的数据在传参时就会有所不同.值类型数据在调用方法传参时,普通情况下是值传递 ...