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

最新推荐文章于 2024-04-26 08:42:00 发布

f清风q

最新推荐文章于 2024-04-26 08:42:00 发布

阅读量7.7w

点赞数 35

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

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

版权

今天这篇文章给大家带来的是在移动端很常见的开关按钮控件。样式主要是通过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

最低0.47元/天解锁文章

f清风q

关注

35
点赞
踩
109

收藏

觉得还不错? 一键收藏
19
评论
HTML/CSS 自定义开关按钮控件(switch)样式

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

扫一扫