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改变默 ...
随机推荐
- vue 本地环境API代理设置和解决跨域
写一个config.js文件,作为项目地址的配置. //项目域名地址 const url = 'https://exaple.com'; let ROOT; //由于封装的axios请求中,会将ROO ...
- CentOS下MYSQL数据库的安装
关于在Centos系统下安装MYSQL数据库,网络上资料有很多,在此主要感谢该文章的博主:http://www.cnblogs.com/zhoulf/archive/2013/01/25/zhoulf ...
- cf期望概率专题
cf1009E:求到第i段期望和的比较困难,但是单独求每段的期望是比较容易的,所以单独对每段求和,然后累计总和 E[i]=1/2*a1+1/4*a2+...+1/2^(i-1)*ai-1+1/2^(i ...
- BZOJ 4516: [Sdoi2016]生成魔咒(后缀数组)
传送门 解题思路 题目其实就是动态维护本质不同的串的个数.考虑到只有加数字的操作,所以可以用后缀数组.题目是每次往后加数字,这样不好处理,因为每次加数字之后所有的后缀都会改变.所以要转化一下思路,就是 ...
- JZOI1062 【USACO2013JAN】invite
#include <bits/stdc++.h> #define ll long long #define INF 2147483647 #define ll_INF 9223372036 ...
- 2018—2019—2 20165239《网络对抗技术》Exp7 网络欺诈防范
一.原理与实践说明 1.实践目标 本实践的目标是:理解常用网络欺诈背后的原理,以提高防范意识,并提出具体防范方法. 2.实践内容概述 简单应用SET工具建立冒名网站 (1分) ettercap DNS ...
- 关闭windows的DEP
1.与开启dep时一样,按组合键win+r打开运行窗口,输入cmd并按回车,如图所示: 2.调出命令提示符窗口后,输入bcdedit.exe/set {current} nx AlwaysOff ...
- 2 USB标准请求
2 USB标准设备请求的结构 2.1 标准请求 bmRequestType 的D6~D5为00的请求,USB协议定义了11个标准请求(bRequest),其名字与相应的bRequest的值如下表: 表 ...
- PAT_A1041#Be Unique
Source: PAT A1041 Be Unique (20 分) Description: Being unique is so important to people on Mars that ...
- mkdir和_mkdir的区别
没有下划线的位不符合ISO c++ 标准的写法,标准要求带下划线的标准,没有下划线的是为了兼容以前的版本.