针对于CheckBox默认样式的改变,和选中状态的改变

<label class="checkBox"><input type="checkbox">全选</label>

  

input[type='checkbox']{
width: 20px;
height: 20px;
background-color: #fff;
-webkit-appearance:none;
border: 1px solid #c9c9c9;
border-radius: 2px;
outline: none;
}

  

.checkBox input[type=checkbox]:checked{
background: url("../images/checkbox_icon.png")no-repeat center;
}

  

改变checkbox的默认样式的更多相关文章

  1. 修改 input[type="radio"] 和 input[type="checkbox"] 的默认样式

    表单中,经常会使用到单选按钮和复选框,但是,input[type="radio"] 和 input[type="checkbox"] 的默认样式在不同的浏览器或 ...

  2. 更改checkbox的默认样式

    最近做一个vue项目要用到checkbox要修改默认样式,选中是纯白色,不选择只有白色边框,起初以为很容易,没想到还折腾了一翻,记录一下. 几经折腾,理清input 和label的关系 最终改进版本, ...

  3. 微信小程序修改radio和checkbox的默认样式和图标

    wxml: <view class="body"> <view class="body-content"> 第1题:企业的价值观是 ? ...

  4. 关于去除input type='file'改变组件的默认样式换成自己需要的样式的解决方案

    在工作中时常会遇到如需要上传功能的按钮,而不像需要系统默认的样式时候,可以采取以下的解决方案: <img onclick="getElementById('file').click() ...

  5. 改变checkbox默认样式

    input[type='checkbox']{ width: 5rem; height: 5rem; -webkit-appearance: none; /*清除复选框默认样式*/ backgroun ...

  6. 用纯css改变下拉列表select框的默认样式(不兼容IE10以下)

    在这篇文章里,我将介绍如何不依赖JavaScript用纯css来改变下拉列表框的样式.     事情是这样的,您的设计师团队向您发送一个新的PSD(Photoshop文档),它是一个新的网站的最终设计 ...

  7. 用纯css改变下拉列表select框的默认样式

    http://ourjs.com/detail/551b9b0529c8d81960000007 在这篇文章里,我将介绍如何不依赖JavaScript用纯css来改变下拉列表框的样式. 问题的提出 事 ...

  8. 修改radio、checkbox、select默认样式的方法

    样式 radio select checkbox 兼容性 现在前端页面效果日益丰富,默认的input组件样式显然已经不能满足需求.趁着这次开发的页面中有这方面的需求,在这里整理一下修改radio.ch ...

  9. 改变radio默认样式

    改变radio默认样式,代码如下: <!doctype html> <html> <head> <meta charset="UTF-8" ...

随机推荐

  1. Fire Net ZOJ - 1002

    题意: 一个n * n 的棋盘 上面有些障碍物  放棋子 棋子不能在同一行 同一列 但可以在同一行或同一列隔着障碍物放 这题与poj1321  的思想差不多 对于一个位置 有两种状态放还是不放 参数i ...

  2. 【 Gym - 101138F 】GukiZ Height (数学)

    BUPT2017 wintertraining(15) #4 C Gym - 101138F 题意 初始高度0,目标值h,第i天目标值会下降i,当前高度会改变a[i%n],求高度不小于目标值的最早的时 ...

  3. Leetcode 190.颠倒二进制位 By Python

    颠倒给定的 32 位无符号整数的二进制位. 示例: 输入: 43261596 输出: 964176192 解释: 43261596 的二进制表示形式为 000000101001010000011110 ...

  4. HTM L百度地图API 自定义工具地图实例

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. [hdu3466]Proud Merchants

    题目描述 Recently, iSea went to an ancient country. For such a long time, it was the most wealthy and po ...

  6. 从C,C++,JAVA和C#看String库的发展(一)----C语言和C++篇

    转自: http://www.cnblogs.com/wenjiang/p/3266305.html 基本上所有主流的编程语言都有String的标准库,因为字符串操作是我们每个程序员几乎每天都要遇到的 ...

  7. 有趣的electron(一)

    跟我一起实现一个基于electron的hello-world吧- Come with me to implement an electron-based project hello-world. 先看 ...

  8. (递推 大整数) Children’s Queue hdu1297

    Children’s Queue Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) ...

  9. 记一次B站答题经历

    第一题部分:社区规范卷 --------- ------------ 第二题:社区规范第二部分 -------------------- 第三部分自由选择题 --------------------- ...

  10. AtomicInteger和count++的比较

    J2SE 5.0提供了一组atomic class来帮助我们简化同步处理.基本工作原理是使用了同步synchronized的方法实现了对一个long, integer, 对象的增.减.赋值(更新)操作 ...