HTML/CSS 自定义开关按钮控件(switch)样式

最新推荐文章于 2023-10-17 15:39:21 发布

f清风q

最新推荐文章于 2023-10-17 15:39:21 发布

阅读量7.7w

点赞数 35

分类专栏： JavaSript HTML5 文章标签： html css 开关按钮控件自定义样式

本文链接：https://blog.csdn.net/u013347241/article/details/51915821

版权

本文介绍如何使用CSS自定义移动端开关按钮样式，通过隐藏input[type='checkbox']并利用其他HTML元素和CSS属性如transition、::before和::after实现。详细讲述了HTML结构、CSS样式设置以及事件监听的实现方法。

摘要由CSDN通过智能技术生成

今天这篇文章给大家带来的是在移动端很常见的开关按钮控件。样式主要是通过CSS来定制完成，上一篇博客讲的是自定义滑动条的样式，同样是自定义样式，上一篇是直接通过CSS对 input[type="range"]进行样式改造，而今天这一篇实现思路是上一次提到过的另一种方案，将input[type="checkbox"] 控件隐藏，通过其他标签来完成样式的定制。这样做的好处就在于更加的灵活，这是我们今天所要达到的效果。下面就让我们一起来看看怎么实现吧。

1.编写HTML代码

HTML的代码很简单，下面直接贴出来，再做一个简单的介绍。

<!DOCTYPE html>
<html>
	<head>
		<title>demo</title>
                <script type="text/javascript" src="lib/jquery.js"></script>
                <script type="text/javascript"src="js/on_off_switch.js"></script>
                <link rel="stylesheet" href="css/on_off_switch.css" type="text/css">
	</head>

	<body>
		<div class="testswitch">
			<input class="testswitch-chec