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. (转)KL散度的理解

    KL散度(KL divergence) 全称:Kullback-Leibler Divergence. 用途:比较两个概率分布的接近程度.在统计应用中,我们经常需要用一个简单的,近似的概率分布 f * ...

  2. CentOS 7 上CNVnator安装

    1.到github上下载最新版本 https://github.com/abyzovlab/CNVnator/releases 2.先看INSTALL文件,要求以下依赖,我的机器上已经安装了前两个,所 ...

  3. tomcat 持久区溢出

    知识点:堆内存设置(JVM堆内存)java的堆内存分为两块:permantspace(持久带) 和 heap spaceOOM1.年老代溢出,表现为:java.lang.OutOfMemoryErro ...

  4. 学习记录一(Python算数运算符与if语句)

    从网上找到一个Python的学习视频,之前的环境都装好了,今天看的就是算术运算符和变量的命名 其中Python的除法直接就是 / %用于求余 其中还可以进行幂运算**    例如2 ** 3 = 8 ...

  5. POJ_1182_并查集

    http://poj.org/problem?id=1182 pre构建有关系的号码的树,rel保存当前号码与根的关系,0表示相同,1表示根吃当前,2表示当前吃根. 代码中的更新公式可以先把各种情况枚 ...

  6. 面试官:你连RESTful都不知道我怎么敢要你? 文章解析

    面试官:你连RESTful都不知道我怎么敢要你?文章目录01 前言02 RESTful的来源03 RESTful6大原则1. C-S架构2. 无状态3.统一的接口4.一致的数据格式4.系统分层5.可缓 ...

  7. 大数据篇:Zookeeper

    Zookeeper 1 Zookeeper概念 Zookeeper是什么 是一个基于观察者设计模式的分布式服务管理框架,它负责和管理需要关心的数据,然后接受观察者的注册,一旦这些数据的状态发生变化,Z ...

  8. python学习(6)选择排序算法简单代码

    选择排序的基本思想是:每一趟在n-i+1(i=1,2,…n-1)个记录中选取关键字最小的记录作为有序序列中第i个记录.基于此思想的算法主要有简单选择排序.树型选择排序和堆排序.[1] 简单选择排序的基 ...

  9. 使用chrome控制台调试js代码

    1.打开控制台(空白页签即可) 2.将控制台在独立页打开(点击控制台右上角的三个点图标,然后点击如下图中的图标) 3.创建脚本编辑页面 4.页面区域说明 5.花键+回车之行代码 6.常用命令介绍 6. ...

  10. 14-Response

    今日知识 1. response 2. ServletContext对象 response * 功能:设置响应消息 1. 设置响应行 1. 格式:HTTP/1.1 200 ok 2. 设置状态码:se ...