checkbox 样式重写
css样式
.me-checkbox:checked {
background: #1673ff
} .me-checkbox {
outline: none;/*轮廓*/
width: 25px;
height: 25px;
background-color: #ffffff;
border: solid 1px #dddddd;
/* -webkit-border-radius:50%; */
border-radius: 50%;
font-size: 0.8rem;
margin:;
padding:;
position: relative;
display: inline-block;
vertical-align: top;
-webkit-appearance: button; /*让元素看的像一个button*/
-webkit-user-select: none; /*让元素无法选择*/
user-select: none;
-webkit-transition: background-color ease 0.1s;
transition: background-color ease 0.1s;
} .me-checkbox:checked::after {/*这个是划勾*/
content: '';
top: 5px;
left: 5px;
position: absolute;
background: transparent;
border: #fff solid 2px;
border-top: none;
border-right: none;
height: 6px;
width: 10px;
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#ccc{
outline:#00FF00 dotted thick;
width: 25px;
height: 25px;
background-color: #ffffff;
border: solid 1px #dddddd;
/* -webkit-border-radius:50%; */
border-radius: 50%;
display: inline-block;
-webkit-appearance: button;
}
#ccc:checked{
background-color: green;
}
html样式
<input name-checkbox="checkbox" type="checkbox" class="me-checkbox ">
<input name-checkbox="checkbox" type="checkbox" class="me-checkbox ">
<input name-checkbox="checkbox" type="checkbox" class="me-checkbox ">
<input type="checkbox" name-checkbox="" id="ccc">
<script >
var d=document.querySelector("#ccc");
d.onclick=function(){
console.log(d.checked);
}
</script>
checkbox 样式重写的更多相关文章
- WPF 自定义CheckBox样式
自定义CheckBox样式,mark一下,方便以后参考复用 设计介绍: 1.一般CheckBox模板太难看了,肯定要重写其中的模板 2.模板状态为未选中状态和选中状态,设置为默认未选中就好了. 默认状 ...
- 用css改变默认的checkbox样式
自己常用的改变checkbox样式的两个方法: 一.利用background用图片代替checkbox效果 缺点:你首先得有一张好看的图片 优点:浏览器兼容性好 <!doctype html&g ...
- WPF CheckBox样式 ScrollViewer样式 WrapPanel、StackPanel、Grid布局
本节讲述布局,顺带加点样式给大家看看~单纯学布局,肯定是枯燥的~哈哈 那如上界面,该如何设计呢? 1.一些布局元素经常用到.Grid StackPanel Canvas WrapPanel等.如上这种 ...
- css样式重写
//我们经常想修改插件的某一个或几个样式特性,并保留其它的样式.而不是把某个css全部重写一遍. /*原有样式*/.ninew {padding: 0 10px;width: 600px;height ...
- CSS控制checkbox样式
原文地址:http://www.xiumu.org/technology/style-checkboxes-with-css.shtml#comments Checkbox复选框是一个可能每一个网站都 ...
- 【CSS】自定义checkbox样式
修改原生checkbox样式. 效果 原理 1.利用CSS3属性 appearance. 该属性(强制)更改(改变)默认(原生)样式. Firefox 支持替代的 -moz-appearance 属性 ...
- echart 数据视图 样式重写
来源http://blog.csdn.net/u010705091/article/details/75212724 echarts折线图的数据视图样式重写 在echarts.js中,点击折线图的数据 ...
- 定制 input[type="radio"] 和 input[type="checkbox"] 样式
表单中,经常会使用到单选按钮和复选框,但是,input[type="radio"] 和 input[type="checkbox"] 的默认样式在不同的浏览器或 ...
- [转]Android中自定义checkbox样式
android中自定义checkbox的图片和大小 其实很简单,分三步: 1.在drawable中创建文件checkbox_selector.xml: <?xml version=" ...
随机推荐
- Linux vi & bash使用笔记
f 1.vi入门级命令 打开或新建 vi filename 有三种模式,刚开始进去的是一般模式,在一般模式下按 I 之后进入编辑模式 ,按Esc进入命令模式 在命令模式下按 :wq 保存退出 多个窗口 ...
- AcWing 787.归并排序
AcWing 787.归并排序 题目描述 给定你一个长度为n的整数数列. 请你使用归并排序对这个数列按照从小到大进行排序. 并将排好序的数列按顺序输出. 输入格式 输入共两行,第一行包含整数 n. 第 ...
- python学习Day05--字典
[主要内容] 1. dict 用大括号{} 括起来. 内部使用key:value的形式来保存数据 {'jay':'周杰伦', "jj":'林俊杰'} 注意:字典的key必须是可哈希 ...
- CCF_201604-4_游戏
bfs,首先记录危险方格的时间,因为100时间之后,所有方格均不危险,所以最短时间的最大值为300,记录每个坐标每个时间的状态,直接bfs即可. #include<cstdio> #inc ...
- MainActivity中R为红色
除了在gradle.properties中加入东西外还可能原因是在activity_main.xml 组件的设置有错误
- HDU 5558 Alice's Classified Message(后缀数组+二分+rmq(+线段树?))
题意 大概就是给你一个串,对于每个\(i\),在\([1,i-1]\)中找到一个\(j\),使得\(lcp(i,j)\)最长,若有多个最大\(j\)选最小,求\(j\)和这个\(lcp\)长度 思路 ...
- Codeforces gym101755F Tree Restoration(拓扑排序)
题意: 一棵树,给出每个点的后代们,问你这棵树是否存在,存在就给出这棵树 n<=1000 思路: 对祖先->后代建立有向图,跑拓扑排序.跑的时候不断更新父亲并判断答案的存在性,同时注意一种 ...
- java设计模式7——桥接模式
java设计模式7--桥接模式 1.桥接模式介绍 桥接模式是将抽象部分与它的实现部分分离,使他们都可以独立的变化.它是一种对象结构型模式,又称为柄体模式或接口模式. 2.解决问题 2.1.将复杂的组合 ...
- 【MySQL 线上 BUG 分析】之 多表同字段异常:Column ‘xxx’ in field list is ambiguous
一.生产出错! 今天早上11点左右,我在工作休息之余,撸了一下猫.突然,工作群响了,老大在里面说:APP出错了! 妈啊,这太吓人了,因为只是说了出错,但是没说错误的信息.所以我赶紧到APP上看看. 这 ...
- 一. 数据分片和路由 <<大数据日知录>> 读书笔记
本章主要讲解大数据下如何做数据分片,所谓分片,即将大量数据分散在不同的节点,同时每个存储节点还要做副本备份. 而一般的抽象分片方法是, 先将数据映射到一个分片空间,这是多对一的关系,即一个数据分片区间 ...