使用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的样式的更多相关文章

  1. css美化checkbox radio样式

    /*check,radio*/ input.check_txt[type='checkbox']{ display: none; } input.check_txt[type='checkbox'] ...

  2. 用CSS美化checkbox复选按钮和raido单选按钮-适用于移动端

    最终效果: 实现方法 index.html: <!DOCTYPE html> <html> <head> <title></title> & ...

  3. 利用纯CSS美化checkbox和radio和滑动按钮的实现

    W3C提供的CheckBox和radio的原始样式非常的丑,而且在不同的额浏览器表现还不一样,使用常规的方法添加样式没法进行修改样式 一, 单选按钮 <html> <head> ...

  4. css美化checkbox

  5. input美化 checkbox和radio样式

    input美化    checkbox和radio样式 看惯了input[checkbox]和input[radio]默认样式,有没有想要改变一下呢?比如下面的样式: 比起html默认的样式,上图这些 ...

  6. 用纯CSS美化radio和checkbox

    Radio和checkbox需要美化吗?答案是必须的,因为设计风格一直都会变化,原生的样式百年不变肯定满足不了需求. 先看看纯CSS美化过后的radio和checkbox效果:查看. 项目地址:mag ...

  7. css input[type=file] 样式美化,input上传按钮美化

    css input[type=file] 样式美化,input上传按钮美化 参考:http://www.haorooms.com/post/css_input_uploadmh

  8. css 设置 checkbox复选框控件的对勾√样式

      效果 最终的样式,想要的效果:   我们要创建方框中的对勾,对于这一点,我们可以使用:after伪类创建一个新的元素,为了实现这个样式,我们可以创建一个5px * 15px的长方形并给他加上边框. ...

  9. 用纯css改变默认的radio和checkbox的样式

    利用css的label的伪类(::before)代替checkbox和radio效果: 优点:需要图片来调整选中前和选中后的样式,纯css搞定 缺点:兼容性,IE8以下不支持 在线例子: css改变默 ...

随机推荐

  1. react 的生命周期函数

    生命周期函数: 是指在某一时刻组件自动执行 的函数 初始化: 设置props和state mounting: componentWillMount 在组件即将被挂载到页面的时候自动执行 render ...

  2. linux crontab 计划任务脚本

    在LINUX中你应该先输入crontab -e,然后就会有个vi编辑界面,再输入0 3 * * 1 /clearigame2内容到里面 :wq 保存退出. 在LINUX中,周期执行的任务一般由cron ...

  3. Kubernetes 弹性伸缩HPA功能增强Advanced Horizontal Pod Autoscaler -介绍部署篇

    背景 WHAT(做什么) Advanced Horizontal Pod Autoscaler(简称:AHPA)是kubernetes中HPA的功能增强. 在兼容原生HPA功能基础上,增加预测.执行模 ...

  4. jsp引擎是什么

    1.JSP引擎 执行JSP代码需要在服务器上安装JSP引擎,比较常见的引擎有webLogic和Tomcat.把这些支持JSP的web服务器配置好后,就可以在客户端通过浏览器来访问JSP页面了. 2.J ...

  5. Framework7-Vue的UI组件代码

    Framework7-Vue提供了一套UI组件库,想要什么效果,直接到上面复制代码即可 http://www.framework7.cn/ 这里有非常多的ui组件,基本上可以满足项目中的大部分需求 h ...

  6. web跨域问题解决方案

    在前端开发及调试过程中总能遇到浏览器报如下错误: Response to preflight request doesn't pass access control check: No 'Access ...

  7. error LNK2001: unresolved external symbol "public: __thiscall CWinAppEx::CWinAppEx(int)" (??0CWinApp

    1.这个是网上找的别人的解决办法,本人没试过 解决办法: 网上大多说的这类似问题是解决自定义类的,可是这个连接是系统CWinAppEx,网上查了很久也没找到原因,重装了vs也没解决.后面在google ...

  8. 配置ssh连接会话复用免密码登录

    我们经常使用ssh连接远程主机,为了方便,避免每次登录输入密码,通常使用密钥登录.如果没有设置密钥, 则需要使用密码登录了,若每次都输入密码则十分繁琐.我们可以设置ssh连接会话复用,则登录成功后,会 ...

  9. systemctl命令配置系统服务

    1.systemd的配置文件目录 systemd将daemon执行的脚本视作服务单位(unit),服务依据功能区分时,分为不同的类型(type). 常见的systemd服务类型如下表: 后缀名称    ...

  10. db2,用户名密码不对导致无法连接数据库: Reason: User ID or Password invalid. ERRORCODE=-4214, SQLSTATE=28000

    文章目录 背景 解决 背景 qa需要db2的demo,运维给安装完db2,启动报错 com.ibm.db2.jcc.am.io: [jcc][t4][2013][11249][4.7.112] Con ...