老生常谈，做一个简单的记录。浏览器自带的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. Confluence 6 查看系统信息

    系统信息界面提供了有关 Confluence 的配置信息和 Confluence 部署的环境信息. 希望对你的系统信息进行查看: 在屏幕的右上角单击 控制台按钮 ,然后选择 General Confi ...

  2. Confluence 6 针对 key "cp_" 或 "cps_" 的 "Duplicate Entry" 问题解决

    如果你遇到了下面的错误信息,例如: com.atlassian.confluence.importexport.ImportExportException: Unable to complete im ...

  3. 【JS】中的原型prototype到底是个啥

    一.什么是原型 原型prototype是函数的一个属性,这个属性是一个指针,指向一个对象(原型对象),这个原型对象的用途是包含可以由特定类型的所有实例共享的属性和方法. 函数也是一种对象.它也是属性的 ...

  4. json的转换操作

    toJSON 把JS对象{ 'x': 2, 'y': 3 }转为JSON对象格式的字符串   不能转化字符串 比如"{ 'x': 2, 'y': 3 }" 可以转格式不标准的jso ...

  5. border画梯形

    <!doctype html><html lang="en"> <head>  <meta charset="UTF-8&quo ...

  6. bzoj 1951

    这道题告诉了我们一个很重要的道理:看到题,先想明白再动手! 题意:求对999911659取模的值 首先,由于n的数据范围不是很大(至少不是很大),所以可以O()枚举所有约数分别求组合数 但是有个问题: ...

  7. Python元组(tuple)

    元组(tuple)是Python中另一个重要的序列结构,与列表类型,也是由一系列按特定顺序排列的元素组成,但是他是不可变序列.在形式上元组的所有元素都放在"()"中,两个元素使用& ...

  8. 目标检测算法之Fast R-CNN算法详解

    在介绍Fast R-CNN之前我们先介绍一下SPP Net 一.SPP Net SPP:Spatial Pyramid Pooling(空间金字塔池化) 众所周知,CNN一般都含有卷积部分和全连接部分 ...

  9. ElasticSearch简要总览

    今天看了一下ElasticSearch的相关文档,我做了如下总结: 发现越来越喜欢画图归纳总结知识了,看图说话 集群特性说明 健康状况的说明 如何配置分片? 接下来一张图总结下操作相关的总结 接下来, ...

  10. C#学习-析构函数

    析构函数用于在类销毁之前释放类实例所使用的托管和非托管资源. 对于C#应用程序所创建的大多数对象,可以依靠.NET Framework的垃圾回收器(GC)来隐式地执行内存管理任务. 但是,若创建封装了 ...