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=" ...
随机推荐
- (转)KL散度的理解
KL散度(KL divergence) 全称:Kullback-Leibler Divergence. 用途:比较两个概率分布的接近程度.在统计应用中,我们经常需要用一个简单的,近似的概率分布 f * ...
- CentOS 7 上CNVnator安装
1.到github上下载最新版本 https://github.com/abyzovlab/CNVnator/releases 2.先看INSTALL文件,要求以下依赖,我的机器上已经安装了前两个,所 ...
- tomcat 持久区溢出
知识点:堆内存设置(JVM堆内存)java的堆内存分为两块:permantspace(持久带) 和 heap spaceOOM1.年老代溢出,表现为:java.lang.OutOfMemoryErro ...
- 学习记录一(Python算数运算符与if语句)
从网上找到一个Python的学习视频,之前的环境都装好了,今天看的就是算术运算符和变量的命名 其中Python的除法直接就是 / %用于求余 其中还可以进行幂运算** 例如2 ** 3 = 8 ...
- POJ_1182_并查集
http://poj.org/problem?id=1182 pre构建有关系的号码的树,rel保存当前号码与根的关系,0表示相同,1表示根吃当前,2表示当前吃根. 代码中的更新公式可以先把各种情况枚 ...
- 面试官:你连RESTful都不知道我怎么敢要你? 文章解析
面试官:你连RESTful都不知道我怎么敢要你?文章目录01 前言02 RESTful的来源03 RESTful6大原则1. C-S架构2. 无状态3.统一的接口4.一致的数据格式4.系统分层5.可缓 ...
- 大数据篇:Zookeeper
Zookeeper 1 Zookeeper概念 Zookeeper是什么 是一个基于观察者设计模式的分布式服务管理框架,它负责和管理需要关心的数据,然后接受观察者的注册,一旦这些数据的状态发生变化,Z ...
- python学习(6)选择排序算法简单代码
选择排序的基本思想是:每一趟在n-i+1(i=1,2,…n-1)个记录中选取关键字最小的记录作为有序序列中第i个记录.基于此思想的算法主要有简单选择排序.树型选择排序和堆排序.[1] 简单选择排序的基 ...
- 使用chrome控制台调试js代码
1.打开控制台(空白页签即可) 2.将控制台在独立页打开(点击控制台右上角的三个点图标,然后点击如下图中的图标) 3.创建脚本编辑页面 4.页面区域说明 5.花键+回车之行代码 6.常用命令介绍 6. ...
- 14-Response
今日知识 1. response 2. ServletContext对象 response * 功能:设置响应消息 1. 设置响应行 1. 格式:HTTP/1.1 200 ok 2. 设置状态码:se ...