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改变默 ...
随机推荐
- 71 Serializable(序列化和反序列化)
对象的输出流:ObjectOutputStream 把对象输出到文件存储起来,我们称作为序列化对象的输入流:ObjectInputStream 把对象从文件中读取出来,我们称作为反序列化 Obj ...
- python基础和编程库
Python编程从入门到实践-------基础入门 1.Python中的变量 2.Python首字母大写使用title()方法,全部大写upper()方法,全部小写lower()方法 3.Python ...
- 基于Flink和规则引擎的实时风控解决方案
案例与解决方案汇总页:阿里云实时计算产品案例&解决方案汇总 对一个互联网产品来说,典型的风控场景包括:注册风控.登陆风控.交易风控.活动风控等,而风控的最佳效果是防患于未然,所以事前事中和事后 ...
- C语言新手写扫雷攻略2
接下来是游戏的功能设计,要有扫雷的基本功能,左键点击雷区,右键红旗标记,并且可以统计雷数,可以重新开始,以下是游戏的功能初始 void Game(void) { while (1) { if (FLA ...
- Springboot开篇
1.Spring -boot-starter-web:用于构建web 应用模块,加入后包含spring mvc框架,默认内嵌tomcat容器 2.spring-boot-starter-jpa:用于构 ...
- JVM 源码分析之 javaagent 原理完全解读
转载:https://infoq.cn/article/javaagent-illustrated 本文重点讲述 javaagent 的具体实现,因为它面向的是我们 Java 程序员,而且 agent ...
- pefile解析PE格式
import os,sys import pefile import pydasm import struct #print sys.argv def show_section(pe): print ...
- 词表征 3:GloVe、fastText、评价词向量、重新训练词向量
原文地址:https://www.jianshu.com/p/ca2272addeb0 (四)GloVe GloVe本质是加权最小二乘回归模型,引入了共现概率矩阵. 1.基本思想 GloVe模型的目标 ...
- vant实现三级联动
首先要在vant 框架里边 复制一下 省市区的 地址数据在这里下载eare.js 格式 : var address = { province_list: { 110000: '北京市', }, ...
- 实验报告&总结
Java实验报告 班级计科二班 学号 20188429 姓名 罗璇哲 完成时间 评分等级 实验三 String类的应用 一. 实验目的 (1) 掌握类String类的使用: (2) 学会使用JDK帮助 ...