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 样式重写的更多相关文章

  1. WPF 自定义CheckBox样式

    自定义CheckBox样式,mark一下,方便以后参考复用 设计介绍: 1.一般CheckBox模板太难看了,肯定要重写其中的模板 2.模板状态为未选中状态和选中状态,设置为默认未选中就好了. 默认状 ...

  2. 用css改变默认的checkbox样式

    自己常用的改变checkbox样式的两个方法: 一.利用background用图片代替checkbox效果 缺点:你首先得有一张好看的图片 优点:浏览器兼容性好 <!doctype html&g ...

  3. WPF CheckBox样式 ScrollViewer样式 WrapPanel、StackPanel、Grid布局

    本节讲述布局,顺带加点样式给大家看看~单纯学布局,肯定是枯燥的~哈哈 那如上界面,该如何设计呢? 1.一些布局元素经常用到.Grid StackPanel Canvas WrapPanel等.如上这种 ...

  4. css样式重写

    //我们经常想修改插件的某一个或几个样式特性,并保留其它的样式.而不是把某个css全部重写一遍. /*原有样式*/.ninew {padding: 0 10px;width: 600px;height ...

  5. CSS控制checkbox样式

    原文地址:http://www.xiumu.org/technology/style-checkboxes-with-css.shtml#comments Checkbox复选框是一个可能每一个网站都 ...

  6. 【CSS】自定义checkbox样式

    修改原生checkbox样式. 效果 原理 1.利用CSS3属性 appearance. 该属性(强制)更改(改变)默认(原生)样式. Firefox 支持替代的 -moz-appearance 属性 ...

  7. echart 数据视图 样式重写

    来源http://blog.csdn.net/u010705091/article/details/75212724 echarts折线图的数据视图样式重写 在echarts.js中,点击折线图的数据 ...

  8. 定制 input[type="radio"] 和 input[type="checkbox"] 样式

    表单中,经常会使用到单选按钮和复选框,但是,input[type="radio"] 和 input[type="checkbox"] 的默认样式在不同的浏览器或 ...

  9. [转]Android中自定义checkbox样式

    android中自定义checkbox的图片和大小   其实很简单,分三步: 1.在drawable中创建文件checkbox_selector.xml: <?xml version=" ...

随机推荐

  1. Linux vi & bash使用笔记

    f 1.vi入门级命令 打开或新建 vi filename 有三种模式,刚开始进去的是一般模式,在一般模式下按 I 之后进入编辑模式 ,按Esc进入命令模式 在命令模式下按 :wq 保存退出 多个窗口 ...

  2. AcWing 787.归并排序

    AcWing 787.归并排序 题目描述 给定你一个长度为n的整数数列. 请你使用归并排序对这个数列按照从小到大进行排序. 并将排好序的数列按顺序输出. 输入格式 输入共两行,第一行包含整数 n. 第 ...

  3. python学习Day05--字典

    [主要内容] 1. dict 用大括号{} 括起来. 内部使用key:value的形式来保存数据 {'jay':'周杰伦', "jj":'林俊杰'} 注意:字典的key必须是可哈希 ...

  4. CCF_201604-4_游戏

    bfs,首先记录危险方格的时间,因为100时间之后,所有方格均不危险,所以最短时间的最大值为300,记录每个坐标每个时间的状态,直接bfs即可. #include<cstdio> #inc ...

  5. MainActivity中R为红色

    除了在gradle.properties中加入东西外还可能原因是在activity_main.xml 组件的设置有错误

  6. HDU 5558 Alice's Classified Message(后缀数组+二分+rmq(+线段树?))

    题意 大概就是给你一个串,对于每个\(i\),在\([1,i-1]\)中找到一个\(j\),使得\(lcp(i,j)\)最长,若有多个最大\(j\)选最小,求\(j\)和这个\(lcp\)长度 思路 ...

  7. Codeforces gym101755F Tree Restoration(拓扑排序)

    题意: 一棵树,给出每个点的后代们,问你这棵树是否存在,存在就给出这棵树 n<=1000 思路: 对祖先->后代建立有向图,跑拓扑排序.跑的时候不断更新父亲并判断答案的存在性,同时注意一种 ...

  8. java设计模式7——桥接模式

    java设计模式7--桥接模式 1.桥接模式介绍 桥接模式是将抽象部分与它的实现部分分离,使他们都可以独立的变化.它是一种对象结构型模式,又称为柄体模式或接口模式. 2.解决问题 2.1.将复杂的组合 ...

  9. 【MySQL 线上 BUG 分析】之 多表同字段异常:Column ‘xxx’ in field list is ambiguous

    一.生产出错! 今天早上11点左右,我在工作休息之余,撸了一下猫.突然,工作群响了,老大在里面说:APP出错了! 妈啊,这太吓人了,因为只是说了出错,但是没说错误的信息.所以我赶紧到APP上看看. 这 ...

  10. 一. 数据分片和路由 <<大数据日知录>> 读书笔记

    本章主要讲解大数据下如何做数据分片,所谓分片,即将大量数据分散在不同的节点,同时每个存储节点还要做副本备份. 而一般的抽象分片方法是, 先将数据映射到一个分片空间,这是多对一的关系,即一个数据分片区间 ...