使用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. Sphinx + Read the docs theme

    前言: 使用Sphinx 生成文档和使用 Read The Docs 的 readthedocs/sphinx_rtd_theme,假设是在Windows上运行并已安装好 python,可以执行pyt ...

  2. sping+quartz定时任务的最简单实践

    1,启动spring容器 Tomcat启动的时候,加载web.xml的listener和context-param,spring的listener监听到对应的contextConfigLocation ...

  3. throws/throw Exception 异常应用

    throws通常用于方法的声明,当方法中发生异常的时候,却不想在方法中对异常进行处理的时候,就可以在声明方法时, 使用throws声明抛出的异常,然后再调用该方法的其他方法中对异常进行处理(如使用tr ...

  4. jqery基础知识实例(二)

    无缝滚动 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...

  5. Minimum Snap轨迹规划详解(2)corridor与时间分配

    在上一篇文章中,我们得到的轨迹并不是很好,与路径差别有点大,我们期望规划出的轨迹跟路径大致重合,而且不希望有打结的现象,而且希望轨迹中的速度和加速度不超过最大限幅值.为了解决这些问题有两种思路: 思路 ...

  6. 吉首大学校赛 K 白山茶与红玫瑰 (线段树区间操作)

    链接:https://ac.nowcoder.com/acm/contest/925/K来源:牛客网 题目描述 公元2019年6月22日,白山茶王国与红玫瑰王国展开大战,在世外仙境——天空花园处,双方 ...

  7. js 获取数组中的最大值和最小值

    var arr = [3,12,23,18,25,33,22,30,1] 方案一: 思想 首先对数组进行排序(小 >大),第一项为最小值,最后一项为最大值 var min; var max; a ...

  8. Java桌球小游戏1

    版本三.使小球动起来package cn.xjion.game;/** * 水平滚动 * @author xjion * */import java.awt.*;import javax.swing. ...

  9. Dijkstra Algorithm 迪克特斯拉算法--Python

    迪克斯拉特算法: 1.找出代价最小的节点,即可在最短时间内到达的节点: 2.更新节点的邻居的开销: 3.重复这个过程,直到图中的每个节点都这样做了: 4.计算最终路径. ''' 迪克斯特拉算法: 1. ...

  10. CSS:CSS 尺寸 (Dimension)

    ylbtech-CSS:CSS 尺寸 (Dimension) 1.返回顶部 1. CSS 尺寸 (Dimension) CSS 尺寸 (Dimension) 属性允许你控制元素的高度和宽度.同样,它允 ...