css美化checkbox的样式
使用iCheck插件可以改变checkbox、radio的原有样式,但是改变的样式尺寸有些大修改起来也比较麻烦,并且需要使用iCheck的调用方法才能使用,有时候iCheck方法还会覆盖掉同级元素的click事件,所以费了些时间写了一个单纯css可以控制样式的解决方法,以checkbox为例:
input[type="checkbox"]{
position: relative;
width: 13px;
height: 13px;
background: #fff;
border: 1px solid #dcdcdc;
border-radius: 1px;
-webkit-appearance: none;
border-width: 0 \0;
}
input[type="checkbox"]:focus {
outline:;
border-color: #428bca;
}
input[type="checkbox"]:checked {
background: #fff;
border-color: #0099ff;
}
input[type="checkbox"]:checked::after {
content: url(checkmark.png);
display: block;
position: absolute;
top: -6px;
left: -5px;
}
通过改变checkmark.png来定义自己的样式


jquery判断checked的三种方法:
.attr('checked): //看版本1.6+返回:”checked”或”undefined” ;1.5-返回:true或false
.prop('checked'): //16+:true/false
.is(':checked'): //所有版本:true/false//别忘记冒号哦
jquery赋值checked的几种写法:
所有的jquery版本都可以这样赋值:
// $("#cb1").attr("checked","checked");
// $("#cb1").attr("checked",true);
jquery1.6+:prop的4种赋值:
// $("#cb1″).prop("checked",true);//很简单就不说了哦
// $("#cb1″).prop({checked:true}); //map键值对
// $("#cb1″).prop("checked",function(){
return true;//函数返回true或false
});
//记得还有这种哦:$("#cb1″).prop("checked","checked");
css美化checkbox的样式的更多相关文章
- css美化checkbox radio样式
/*check,radio*/ input.check_txt[type='checkbox']{ display: none; } input.check_txt[type='checkbox'] ...
- 用CSS美化checkbox复选按钮和raido单选按钮-适用于移动端
最终效果: 实现方法 index.html: <!DOCTYPE html> <html> <head> <title></title> & ...
- 利用纯CSS美化checkbox和radio和滑动按钮的实现
W3C提供的CheckBox和radio的原始样式非常的丑,而且在不同的额浏览器表现还不一样,使用常规的方法添加样式没法进行修改样式 一, 单选按钮 <html> <head> ...
- css美化checkbox
- input美化 checkbox和radio样式
input美化 checkbox和radio样式 看惯了input[checkbox]和input[radio]默认样式,有没有想要改变一下呢?比如下面的样式: 比起html默认的样式,上图这些 ...
- 用纯CSS美化radio和checkbox
Radio和checkbox需要美化吗?答案是必须的,因为设计风格一直都会变化,原生的样式百年不变肯定满足不了需求. 先看看纯CSS美化过后的radio和checkbox效果:查看. 项目地址:mag ...
- css input[type=file] 样式美化,input上传按钮美化
css input[type=file] 样式美化,input上传按钮美化 参考:http://www.haorooms.com/post/css_input_uploadmh
- css 设置 checkbox复选框控件的对勾√样式
效果 最终的样式,想要的效果: 我们要创建方框中的对勾,对于这一点,我们可以使用:after伪类创建一个新的元素,为了实现这个样式,我们可以创建一个5px * 15px的长方形并给他加上边框. ...
- 用纯css改变默认的radio和checkbox的样式
利用css的label的伪类(::before)代替checkbox和radio效果: 优点:需要图片来调整选中前和选中后的样式,纯css搞定 缺点:兼容性,IE8以下不支持 在线例子: css改变默 ...
随机推荐
- spring security学习总结
这几天一直在学习spring security的相关知识.逛各大论坛,看相关api与教学视频,获益良多! 简介 Spring Security是为基于Spring的企业应用系统提供声明式的安全访问控制 ...
- Eclipse maven 明明有jar包 但是不能用
原因1:没有引入pom.xml依赖 解决: 添加pom.xml依赖
- 59. jdk1.5新特性之----增强for循环
/*jdk1.5新特性之----增强for循环:底层是一个迭代器 作用:简化迭代器书写格式 使用范围:实现了Iterable接口的对象或者数组对象 格式: for(变量类型 变量名 :遍历目标 ...
- java中EL表达式怎么获取网站的根目录
${pageContext.request.contextPath} <a href="${pageContext.request.contextPath}/login.jsp&quo ...
- OS: 生产者消费者问题(二) ---- 系统V IPC通信-信号量和共享内存
在上一篇“OS: 生产者消费者问题(多进程+共享内存+信号量)”中提到的方法二: 如果进程之间并没有父子关系,但是协商好了共享存储的 KEY , 那么在每个进程中,就可以通过 KEY 以及 shmge ...
- 2017年上半年,一线城市豪宅TOP50成交均价排名
辣眼睛!最新豪宅排行榜来了!释放重磅信号 东方财富网 2017-07-27 08:47 阅读:152 摘要:在中国,在买房这个问题上,不少工薪族都感到亚历山大.但是,在富豪眼里,犯难的是投资哪个房地产 ...
- element not visible的解决方法
抛出异常主题为element not visible主要有一下三个方面的原因. 元素之间存在逻辑关系,比如你要选择地址时,中国选择完毕之后,才能选择北京.如果想直接一步到位,则会出现element n ...
- opencv环境变量配置
本文章由@浅墨_毛星云 出品 原文文章链接:http://blog.csdn.net/poem_qianmo/article/details/19809337 作者:毛星云(浅墨) 微博:ht ...
- nginx代理一个服务器上所有域名
1. 主配置文件不需要更改任何配置2. 在vhosts目录下需要建立两个文件,一个是servername 列表文件,一个是虚拟主机配置文件两个文件内容分别为 #() servername server ...
- Android逆向之smali语法宝典
0x01.前言 Android采用的是java语言进行开发,但是Android系统有自己的虚拟机Dalvik,代码编译最终不是采用的java的class,而是使用的smali.我们反编译得到的代码,j ...