checkbox、radio设置自定义样式
老生常谈，做一个简单的记录。浏览器自带的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设置自定义样式的更多相关文章
- 纯css兼容个浏览器input[type='radio']不能自定义样式
各个浏览器对于表单input[type='radio'].input[type='checkbox']的样式总是各有差异 //html <div class="remember-a ...
- C# 自定义样式实现菜单和工具栏的分割线
在做WinForm界面布局时,菜单和工具栏必不可少!但是MenuStrip和ToolStrip不能够对边框的样式直接设置,如果想实现菜单和工具栏之间的分割线就不容易实现:今天查阅了一下msdn找到了一 ...
- 微信小程序 修改(自定义) 单选/复选按钮样式 checkbox/radio样式自定义
参考文章: 微信小程序 修改(自定义) 单选/复选按钮样式 checkbox/radio样式自定义
- 自定义checkbox/radio
一. label标签 1. 概念: HTML <label>元素表示用户界面中项目的标题.它通常关联一个控件,或者是将控件放置在label元素内,或者是用作其属性.这样的控制称作label ...
- WPF自定义控件与样式(4)-CheckBox/RadioButton自定义样式
一．前言 申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等,若有不明白的地方可以参考本系列前面的文章,文末附有部分文章链接. 本文主要内容: Che ...
- 【转】WPF自定义控件与样式(4)-CheckBox/RadioButton自定义样式
一．前言 申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等 本文主要内容: CheckBox复选框的自定义样式,有两种不同的风格实现: RadioB ...
- css自定义 range radio select的样式滑轮，按钮，选择框
写在前面: 之前踩坑css的时候,遇到滑轮,按钮,选择框这类型的东西,为了页面效果,总是需要自定义他们的样式,而不使用他们的默认样式.当时写的时候,我也是蛮头疼的,弄了个demo,链接在下面.对此做个 ...
- WPF CheckBox 自定义样式
WPF 自定义样式.CheckBox <Style x:Key="EmptyCheckBox" TargetType="CheckBox"> < ...
- jquery 获取和设置 checkbox radio 和 select option的值?
============== 获取和设置 checkbox radio 和 select的值? === val()函数, 其名字就表达了 它的意思: 他就是＝ value 的简写! val就是valu ...
随机推荐
- Confluence 6 与其他应用整合
你可以使用 应用链接(Application Links)将 Confluence 与其他应用进行整合.应用链接允许你连接 Confluence 到其他的应用,例如 JIRA 软件或者 JIRA 服务 ...
- Confluence 6 为空白空间重置原始默认内容
希望重置为原始的默认内容: 在屏幕的右上角单击 控制台按钮 ,然后选择 General Configuration 链接. 在左侧的面板中选择 全局模板和蓝图(Global Templates and ...
- sql中某条件不为空，可能有的小祖宗会喷了，这还用总结？emmm，我渣，我觉得有一点意思对于第二种(土味)
需求说明:存在父子关系的单表,父级别的parent_id为空,那么要得到所有的子级别的数据信息,查询的条件就是:父id不为空. 个人做法:where parent_id is not null or ...
- bzoj1977次小生成树（重要）
#include<cstdio> #include<iostream> #include<cstring> #include<queue> #inclu ...
- html5 drag 文件拖拽浅淡
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Nginx详解九：Nginx基础篇之Nginx的访问控制
基于IP的访问控制:http_access_module 不允许指定网段的用户访问:配置语法:deny address | CIDR | unix: | all;默认状态:-配置方法:http.ser ...
- 阿里云人脸识别测试接口出错 返回Body：{ "errno": 3002, "err_msg": "ILLEGAL_PARAMETERS", "request_id": "672cba83-cf93-4ef4-9ce5-d87e51601632" }
错误信息如下 返回Body:{ "errno": 3002, "err_msg": "ILLEGAL_PARAMETERS", ...... ...
- Moco使用简单指导
下载地址 需要java运行环境支持.下载jar包:moco-runner-<version>-standalone.jar 配置文件 下面是参考: 配置 Moco的配置文件格式使用的是js ...
- 让Mysql支持Emoji表情，解决[Err] 1366 - Incorrect string value: '\xF0\xA3\x84\x83'
mysql insert内容包含表情或者unicode码时候,插入Mysql时失败了,报如下异常: java.sql.SQLException: Incorrect string value: '\x ...
- MariaDB修改默认字符集
MariaDB修改默认字符集,以及创建数据库授权 1 . 修改server默认字符集utf8 [root@aws my.cnf.d]# vim /etc/my.cnf.d/server.cnf [my ...