老生常谈，做一个简单的记录。浏览器自带的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. 使用 Jira 和 Confluence 6 在一起

    这个过程是有趣的过程.请参考 Use Jira applications and Confluence together 文档来找到有关整合的相关内容,能够在后续的开发中更多的节省时间,以及你需要安装 ...

  2. IE11总是有缓存的问题

    F12,里面选择网络,始终从服务器刷新..

  3. 【sqli-labs】Less17

    Less17: POST注入,UPDATE语句,有错误回显 新知识点: 1. update注入方法 参考:http://www.mamicode.com/info-detail-1665678.htm ...

  4. react 为组件添加样式

    width/height/fontSize:可以直接写数字: style={ width:200,height:200 } 其他带数字的可以:数字+'px' style={ lineHeight:20 ...

  5. codeforce 240E 最小树形图+路径记录更新

    最小树形图的路径是在不断建立新图的过程中更新的,因此需要开一个结构体cancle记录那些被更新的边,保存可能会被取消的边和边在旧图中的id 在朱刘算法最后添加了一个从后往前遍历新建边的循环,这可以理解 ...

  6. name

    问题 A: name 时间限制: 1 Sec  内存限制: 256 MB 题目描述 lpq同学最近突然对外国人的名字产生了兴趣,特别是外国女生的名字,于是他开始试图去认识一些国外的女生. 随着认识的女 ...

  7. ORA-27157 ORA-27300 ORA-27301

    目录: 问题现象 原因分析 解决方案 问题现象: 收到同事反馈,数据库无法连接.于是登录服务器发现,数据库莫名挂掉.实例crash,日志中记录截取一段如下: Errors in file /u01/a ...

  8. SQL得到任意一个存储过程的参数列表sp_procedure_params_rowset

    SQL得到任意一个存储过程的参数列表sp_procedure_params_rowsetexec sp_procedure_params_rowset 'up_rpt营业收入汇总表' PROCEDUR ...

  9. MongoDB 入门

    1 MongoDb 简介 MongoDB是为互联网而生的数据库,是文档数据库. 1.1 优点: Schema-less,不需要预先定义表结构,同一个"表"中可以保存多个格式的数据: ...

  10. Docker建立自己的私有仓库

    拉去仓库镜像 docker pull registry:latest 创建存储账户的文件夹路径 mkdir -p /{dir}/auth/ 创建用户密码信息文件 docker run --entryp ...