老生常谈，做一个简单的记录。浏览器自带的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. UserNotifications ios10 通知使用

    通知在ios10 中推荐使用 导入  import UserNotifications  头文件 if #available(iOS 10.0, *) { UNUserNotificationCent ...

  2. 【splunk】按时间统计并找到异常值

    场景: 有长时间对多个端口访问的日志数据,每天对端口的访问量是稳定的.如果某一天对某个端口的访问量突然增加表示可能出现了问题.现在要通过splunk找到异常值. 思路: 统计每个端口每天的访问量.统计 ...

  3. Distance

    1191: Distance 时间限制: 1 Sec  内存限制: 32 MB 题目描述 There is a battle field. It is a square with the side l ...

  4. CentOS下将Python的版本升级为3.x

    本文主要介绍在Linux(CentOS)下将Python的版本升级为3.x的方法 众所周知,在2020年python官方将不再支持2.7版本的python,所以使用3.x版本的python是必要的,但 ...

  5. Nginx详解二十七：Nginx架构篇之安全篇

    1.常见的恶意行为:爬虫行为和恶意抓取.资源盗用 解决方案: 基础防盗链功能:不让恶意用户能轻易爬去网站对外数据 secure_link_module模块:对数据安全性提高,加密验证和失效性,适合核心 ...

  6. vue项目使用阿里巴巴矢量图标库教程

    前言:element-ui自带的图标库还是不够全,还是需要需要引入第三方icon,自己在用的时候一直有些问题,参考了些教程,详细地记录补充下. 对于我们来说,首选的当然是阿里icon库 地址:http ...

  7. Axure之全局变量

    ****全局变量*****1.定义:变量是一个数据的容器,是一个字符串,可设置默认值:2.功能:两个功能:读.写3.特点:随时随地可以对变量进行读和写,不限页面.也就是在不同的页面也可以访问同一个全局 ...

  8. python unittest框架装饰器

    要说单元测试和UI自动化之间的是什么样的一个关系,说说我个人的一些心得体会吧,我并没有太多的这方面经验,由于工作本身就用的少,还有就是功能测试点点对于我这种比较懒惰的人来说,比单元测试复杂...思考单 ...

  9. python一个用例，多组参数，多个结果

    在某种情况下,需要用不同的参数组合测试同样的行为,你希望从test case的执行结果上知道在测试什么,而不是单单得到一个大的 test case:此时如果仅仅写一个test case并用内嵌循环来进 ...

  10. 使用Bazel构建C/C++项目

    目录 前提 基本概念 速查链接汇总 stage1: 一个package, 一个target stage2: 一个package,多个target stage3: 多package,多target st ...