纯css实现checkbox样式改变
2024-08-31 19:57:56
<!DOCTYPE html>
<html> <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">
<title>checkbox</title>
<style>
.checkbox input {
display: none;
} .checkbox input+label {
background: url(./checkbox1.png) left center no-repeat;
background-size: 20px 20px;
padding-left: 20px;
} .checkbox input:checked+label {
background-image: url(./checkbox2.png);
}
</style>
</head> <body>
<div class="checkbox">
<input type="checkbox" checked id="music" />
<label for="music">音乐</label>
<input type="checkbox" id="sport" />
<label for="sport">运动</label>
</div>
</body> </html>
最新文章
- web前端基础知识-(七)Django进阶
- JDK安装源码src和doc
- Java Calendar 类的时间操作
- Atitit.阿里云c盘 系统盘爆满解决方案
- Hadoop源代码中的build-main.xml
- 【原创】有关Silverlight中“DataGrid中级联动态绑定父/子ComboBox ”的示例。
- [POJ1050]To the Max
- POJ C程序设计进阶 编程题#1:含k个3的数
- C++:类型转换
- Sublime Text 使用简介
- android画虚线的自定义VIew
- poco vs Boost[ZZ]
- win10 uwp 改变鼠标
- [国嵌攻略][148][MTD系统架构]
- 【spring实战第五版遇到的坑】4.2.3中LDAP内嵌服务器不启动的问题
- java项目部署常用linux命令
- .NET Framework简介
- CAtia_打开提示:许可证过期怎么办
- NotePad++ 配置Python工作环境
- SpringBoot-整合lombok
热门文章
- python错误调试print、assert、logging、pdb、pdb.set_trace()
- 找不到UseInMemoryDatabase方法
- 百度大脑UNIT3.0详解之数据生产工具DataKit
- Neo4j安装过程详解
- wepy框架关闭Eslint语法校验(error More than 1 blank line not allowed no-multiple-empty-lines)
- java之枚举和注解
- C语言笔记 02_基本语法&;数据类型&;变量
- C#/.Net开发入门篇(3)——console类的输入输出
- .Net Core 项目发布到Linux - CentOS 7(一)
- tesseract-OCR + pytesseract安装