使用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 ...
随机推荐
- Problem N
Problem Description The cows have purchased a yogurt factory that makes world-famous Yucky Yogurt. O ...
- linq 在查询表达式中处理 null 值
此示例显示如何在源集合中处理可能的 null 值. IEnumerable<T> 等对象集合可包含值为 null 的元素. 如果源集合为 null 或包含值为 null 的元素,并且查询不 ...
- js中编码问题escape、encodeURI
未分类 1.js对文字进行编码涉及3个函数: escape,encodeURI,encodeURIComponent, 相应3个解码函数:unescape,decodeURI,decodeURIC ...
- RE : 球体波浪倒计时
背景: 移动端需要做一个倒计时球体水波的效果.主要用到了CSS的SVG瞄点动画和JS的计时器.该动画原型来自于 使用球体水面波动显示进度动画 http://wow.techbrood.com/fid ...
- 使用springboot完成密码的加密解密
现今对于大多数公司来说,信息安全工作尤为重要,就像京东,阿里巴巴这样的大公司来说,信息安全是最为重要的一个话题,举个简单的例子: 就像这样的密码公开化,很容易造成一定的信息的泄露.所以今天我们要讲的就 ...
- 文本域、bootstrap-table显示以及MySQL三者间的换行符问题
首先,今天在做项目的时候遇到的一个问题,如何实现文本输入换行以及在前台Bootstrap-table中显示也能够换行. 也许你马上就会想到说,用富文本编辑器,然而我们需要实现的只是文本输入以及换行功能 ...
- C#编写的艺术字类方法
代码如下: using System;using System.Collections.Generic;using System.ComponentModel;using System.Drawing ...
- man ctags
ctags命令帮助 命令格式 ctags [options] [file(s)] 或 etags [options] [file(s)] 源文件参数 不同语言中对象的种 ...
- Git文件状态描述
检查当前文件状态 [root@typhoeus79 ice_test_m git_test]# git status # On branch master nothing to commit (wor ...
- MATLAB 大数据剔除坏值
在用MATLAB进行数据分析的时候,坏点对正确结果的影响比较大, 因此,我么需要剔除野点,对于坏值的剔除,我们 利用 3σ准则 剔除无效数据: 3σ准则又称为拉依达准则,它是先假设一组检测数据只含有 ...