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 ...
随机推荐
- x学生管理系统(用中间件)-------基于FORM组件
目的:实现学生,老师,课程的增删改查 models.py from django.db import models # Create your models here. class UserInfo( ...
- javaWeb锁屏的简单实现
简单介绍:需求上有个小功能,用户登录后点击用户名,可以点击锁屏,锁屏解除,需要输入正确的密码才能进入管理后台页面enheng(*/ω\*)(*/ω\*)(*/ω\*) 思路简介:其实刚看到要做锁屏,第 ...
- 常用的Eclipse 快捷键
显示所有快捷方式 SHIFT + CTRL + L 代码类 ALT + / 代码补全 ALT + 1 批量修改变量名 SHIFT + CTRL + F 自动格式代码4 SHIFT + ALT + R ...
- 解决npm install过程中报错:unable to verify the first certificate
今天使用npm安装开发包时遇到“unable to verify the first certificate”(无法验证第一证书)这个问题 原因:2014年2月27日,npm不再支持自签名证书.因为n ...
- 腾讯云Ubuntu安装可视化桌面
1.安装图形界面 sudo apt-get update 更新 1).sudo apt-get install xinit 2).sudo apt-get install gdm ( 登陆窗口,用于 ...
- Spark的Streaming和Spark的SQL简单入门学习
1.Spark Streaming是什么? a.Spark Streaming是什么? Spark Streaming类似于Apache Storm,用于流式数据的处理.根据其官方文档介绍,Spark ...
- [转] Lodash
与underscore 类似 , 是1个js库,内部封装了诸多对字符串.数组.对象等常见数据类型的处理函数. 模块组成 Lodash 提供的辅助函数主要分为以下几类,函数列表和用法实例请查看 Loda ...
- Ncurses - Panel
当你需要创建许多窗口时,你很快就会发现它们会变得难以管理.Panel library提供了很好的解决方案. Panel 实际上是一个窗口,通过容器 - 栈 来管理,栈顶的 panel 是完全可见的,其 ...
- JSP基础知识➣客户端请求与服务端响应(三)
JSP客户端请求 浏览器请求服务器端,信息头的一些重要内容,在以后的网络编程中将会经常见到这些信息: Accept:指定浏览器或其他客户端可以处理的MIME类型.它的值通常为 image/png 或 ...
- python全栈开发day57- pymysql、视图、触发器、函数
一.昨日内容回顾 1.单表查询 优先级 from where group by having select distinct order by limit 2 . 多表查询 inner join... ...