老生常谈，做一个简单的记录。浏览器自带的checkbox和radio样式可能不符合项目要求，通常要做一些自定义样式设置，目前基本的解决思路都是将input[type=checkbox/radio]隐藏，用label去与input做联动处理，具体实现方法有以下两种：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <style>

         /* 方法1 */

         label {

             display: inline-block;

             width: 15px;

             height: 15px;

             background: url('../../../assets/img/unchecked.svg') no-repeat 100% 100%;

         }

         input[type="checkbox"]:checked+label {

             background: url('../../../assets/img/checked.svg') no-repeat 100% 100%;

         }

         /* 方法2 */

         #test+span {

             display: inline-block;

             width: 15px;

             height: 15px;

             background: url('../../../assets/img/unchecked.svg') no-repeat 100% 100%;

         }

         #test:checked+span {

             background: url('../../../assets/img/checked.svg') no-repeat 100% 100%;

         }

     </style>

     <title>checkboxAndRadio</title>

 </head>

 <body ng-app="app">

     <div>方法1</div>

     <input type="checkbox" id="checkbox" style="display: none;">

     <label for="checkbox"></label><br>

     <div>方法2</div>

     <input type="checkbox" id="test" style="display: none;">

     <span></span>

     <script>

         document.getElementsByTagName('span')[0].addEventListener('click', function(e) {

             this.previousElementSibling.checked = !this.previousElementSibling.checked;

         })

     </script>

 </body>

 </html>

　　第一种方式必须要设置元素id，如果表单过多将导致命名很纠结；第二种可以简单的写一个事件监听，去动态改变checkbox的选中状态，以此来达到动态切换的目的。在利用框架进行开发应用时，只需要进行简单的封装即可使用，radio实现同上，效果图如下：

checkbox、radio设置自定义样式的更多相关文章

  1. 纯css兼容个浏览器input[type='radio']不能自定义样式

    各个浏览器对于表单input[type='radio'].input[type='checkbox']的样式总是各有差异   //html <div class="remember-a ...

  2. C# 自定义样式实现菜单和工具栏的分割线

    在做WinForm界面布局时,菜单和工具栏必不可少!但是MenuStrip和ToolStrip不能够对边框的样式直接设置,如果想实现菜单和工具栏之间的分割线就不容易实现:今天查阅了一下msdn找到了一 ...

  3. 微信小程序 修改(自定义) 单选/复选按钮样式 checkbox/radio样式自定义

    参考文章: 微信小程序 修改(自定义) 单选/复选按钮样式 checkbox/radio样式自定义

  4. 自定义checkbox/radio

    一. label标签 1. 概念: HTML <label>元素表示用户界面中项目的标题.它通常关联一个控件,或者是将控件放置在label元素内,或者是用作其属性.这样的控制称作label ...

  5. WPF自定义控件与样式(4)-CheckBox/RadioButton自定义样式

    一．前言 申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等,若有不明白的地方可以参考本系列前面的文章,文末附有部分文章链接. 本文主要内容: Che ...

  6. 【转】WPF自定义控件与样式(4)-CheckBox/RadioButton自定义样式

    一．前言 申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等 本文主要内容: CheckBox复选框的自定义样式,有两种不同的风格实现: RadioB ...

  7. css自定义 range radio select的样式滑轮，按钮，选择框

    写在前面: 之前踩坑css的时候,遇到滑轮,按钮,选择框这类型的东西,为了页面效果,总是需要自定义他们的样式,而不使用他们的默认样式.当时写的时候,我也是蛮头疼的,弄了个demo,链接在下面.对此做个 ...

  8. WPF CheckBox 自定义样式

    WPF 自定义样式.CheckBox <Style x:Key="EmptyCheckBox" TargetType="CheckBox"> < ...

  9. jquery 获取和设置 checkbox radio 和 select option的值?

    ============== 获取和设置 checkbox radio 和 select的值? === val()函数, 其名字就表达了 它的意思: 他就是＝ value 的简写! val就是valu ...

随机推荐

  1. 1709: Fire or Retreat（zzuli）

    水题,哎,可是第一次是因为编译错了,vs不知咋了,无奈: 后面几次又因为类型用了int错了,痛苦: 题目描述 在与科技水平远胜于我们的外星人的战斗最后,我们能够用来对外星装甲造成伤害的武器只剩下了…… ...

  2. Laravel 项目中使用 Bootstrap 框架

    Laravel 如何引入 Bootstrap 如官方文档所言,Laravel 并不强制你使用 CSS 框架,但是开箱提供了对 Bootstrap 的支持,在 resources/js/bootstra ...

  3. 工业以太网EtherNet/IP协议安全分析整理

    1.     EtherNet/IP : 设备可以用户数据报协议(UDP)的隐式报文传送基于IO的资料 ,用户传输控制协议(TCP)显示报文上传和下参数,设定值,程式 ,用户主站的轮询 从站周期性的更 ...

  4. 小学生都看得懂的C语言入门(2): 判别 循环的一些应用实例

    1.bool 类型 定义bool类型之前需要导入#include <stdbool.h> #include <stdio.h> #include <stdbool.h&g ...

  5. Tmk吃汤饭

    问题 : Tmk吃汤饭 时间限制: 1 Sec  内存限制: 128 MB 题目描述 Tmk喜欢吃汤饭! Tmk喜欢吃汤饭!! Tmk喜欢吃汤饭!!! 汤饭窗口分点餐和取餐两个窗口,一位蜀黍负责点餐窗 ...

  6. 第六周学习总结-CSS、JavaScript

    2018年8月19日 这是暑假第六周,这一周我把HTML5的标签大致看完了,并且看了一些CSS和JavaScript的内容. 上一周说这周要把那个简陋的网页用CSS修饰一下,但是真正开始做时,才发现C ...

  7. Python属性(@property)

    创建用于计算机的属性 在Python中,可以通过@property(装饰器)将一个方法转换为属性,从而实现用于计算的属性.将方法转换为属性后,可以直接通过方法名来访问方法,而不需要再添加一对小括号&q ...

  8. 从零开始 DOM操作 笔记

        <div id="box" class="box"></div>   --> var myBox = document.g ...

  9. IDEA中tomcat的部署

    创建一个项目就要部署tomcat

  10. 金蝶k3完全卸载，注册表手动清理

    HKEY_LOCAL_MACHINE\SOFTWARE\KINGDEE 如果操作系统是64位的,在注册表目录:HKEY_LOCAL_MACHINE\SOFTWARE\Wow6432Node下面还有一个 ...