如何动态制作相同大小的切换按钮
动态制作相同大小的切换按钮可以通过使用HTML、CSS和JavaScript来实现。下面是一个示例代码：
HTML代码：
<div class="toggle-button">
<input type="checkbox" id="toggle" />
<label for="toggle"></label>
</div>CSS代码：
.toggle-button {
position: relative;
width: 60px;
height: 30px;
}
.toggle-button input[type="checkbox"] {
display: none;
}
.toggle-button label {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #ccc;
border-radius: 15px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.toggle-button input[type="checkbox"]:checked + label {
background-color: #2196F3;
}
.toggle-button label::before {
content: "";
position: absolute;
top: 2px;
left: 2px;
width: 26px;
height: 26px;
background-color: #fff;
border-radius: 50%;
transition: transform 0.3s ease;
}
.toggle-button input[type="checkbox"]:checked + label::before {
transform: translateX(30px);
}JavaScript代码：
document.getElementById("toggle").addEventListener("change", function() {
// 切换按钮状态时的操作
});这段代码创建了一个切换按钮，按钮的大小为60px宽、30px高。当按钮被切换时，背景颜色会从灰色变为蓝色，并且按钮内部的白色圆圈会向右移动30px。
你可以将这段代码嵌入到你的网页中，并根据需要进行样式和功能的调整。
相关·内容
1回答
如何改变滑块图像
javascript、html、css
如何在滑块中插入太阳和月亮(或任何两幅图像)的图像，所以当单击它时，它将根据启用暗/光模式的时间来更改图像？我不知道该怎么做。我想保持滑块，因为我喜欢的过渡，但我想要在那里的图像显示月亮时，光模式是启用的，允许用户点击它的黑暗模式，同样，当它是在黑暗模式。
HTML：
<main id="main">
<label class="switch">
<input type="checkbox" onclick="darkLight()" id="checkBox" >
浏览 7提问于2022-08-31得票数 1
回答已采纳
4回答
如何使用javascript在onload上切换
javascript、jquery、html、css、toggle
我在我的网站上使用一个开关，我想用javascript来控制它。到目前为止，它只适用于html和css，没有javascript。我想用javascript控制它，并使它在页面上加载为" on“而不是off。
html
<label class="switch">
<input type="checkbox" id="toggle-event">
<span class="slider round"></span>
</label>
css
.sw
浏览 7提问于2017-09-25得票数 0
回答已采纳
1回答
复选框切换方块丢失
html、css、styles、toggle
我一直在做一个自定义样式的复选框，但是由于某种原因，当选中按钮时，方块正在丢失。
有人能指出我在这个复选框上做错了什么吗？
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>switch toggle menu using html css only</title>
</head>
<body>
<div c
浏览 1提问于2022-07-04得票数 0
回答已采纳
1回答
css/sass中的样式切换开关问题
css、sass
我有一些问题，我似乎不能解决的样式切换开关的要求。我现在是这样的： ? ? 然而，它需要看起来像这样： ? ? 这是我的HTML： <label class="switch"><input #handlingUnitAdvancedOptionsCheckBox id="handlingUnitAdvancedOptionsCheckBox" type="checkbox" [checked]="handlingModel.advancedOptions"
(
浏览 12提问于2019-03-09得票数 1
回答已采纳
1回答
如何将本地存储添加到光/暗模式的JavaScript函数中？
javascript、html、css、local-storage
我现在的JavaScript功能在光明和黑暗模式之间切换。但是，当用户刷新页面时，所选择的模式将被遗忘，并恢复到光模式。
我如何添加本地存储功能，以使它需要在光明和黑暗之间切换？我确信这是我当前函数下面的另一个条件语句，但我不确定我当前的JavaScript是否能够正常工作，或者我需要重写它。
<!-- Light/Dark Mode Container -->
<input type="checkbox" id="input-color-switch">
<label for="input
浏览 4提问于2022-10-13得票数 -1
回答已采纳
2回答
使用CSS按钮更改主包装背景颜色
javascript、html、jquery、css
我想通过CSS按钮使用background-color属性更改主包装的背景色。 我的类是<div class='mainWrapper fullWidth'>，类的CSS是.mainWrapper 下面是我在https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_switch找到的按钮的CSS <!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=dev
浏览 23提问于2020-12-10得票数 0
2回答
如何在切换按钮中添加功能
javascript、jquery、html、css
我想添加一些切换按钮更改的功能。目前，它没有切换更改的功能。我想要一个方法，它将被调用切换更改，并做一些工作，如果它是关闭的，如果它是打开的。我想在切换更改下显示和隐藏一些链接。我已经附上了示例代码(CSS和HTML)。请有人帮我写语法。
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.switch input {
display: none;
}
.slider {
position: absolute;
cursor: pointer;
浏览 1提问于2017-11-10得票数 0
1回答
用jQuery重定向复选框
javascript、html、css
所以我有一个很酷的开关盒的html和css，我将使用它作为语言开关在我的网站上。但是，由于我是JavaScript的初学者，所以我缺少了执行重定向操作的处理程序。
这是我目前的工作。问题在于JavaScript。
$(".flag-switch input").click(function(){$(this).is(":checked")?setTimeout(function(){window.location.href="en/"},250):setTimeout(function(){window.location.href="
浏览 2提问于2016-02-25得票数 0
回答已采纳
2回答
CSS开关(复选框)值总是打开/选中
javascript、html、css、dom-events、uiswitch
我刚刚在CSS中将checkbox设计为toggle switch，它工作得很好。但是，输入的值在onchange事件上似乎没有变化，并且总是显示on。
JS代码：
/* The switch - the box around the slider */
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
/* Hide default HTML checkbox */
.switch input {
opacity: 0;
width: 0;
he
浏览 0提问于2019-09-14得票数 4
回答已采纳
2回答
如何将按钮的标签移到左边
html、css
我有一个HTML页面的切换按钮
<div>
<label class="switch" style="margin-left:14em;">
<h5>Profile</h5>
<input id="profile-toggle" checked type="checkbox">
<span class="slider round"></span&
浏览 0提问于2018-06-26得票数 1
回答已采纳
1回答
如何使用CSS来切换一个基于另一个开关的开关？
html、jquery、css
这是。
当我点击‘Switk-1’和反之亦然的时候，javascript函数myFunc()中应该使用什么来获得“Switch-2”以使灰色背景变成蓝色。我对CSS或jQuery相当陌生。我认为解决办法应该是使用其中之一或两者兼而有之。如果有人能够共享代码来实现这一点，将会有很大的帮助。提前谢谢。
function myFunc() {
var checkBox1 = document.getElementById("SW1");
var checkBox2 = document.getElementById("SW2");
if (che
浏览 1提问于2020-11-25得票数 0
回答已采纳
2回答
如何使用一个按钮的JavaScript在两个背景色之间进行更改
javascript、html、css、background-color、event-listener
我发布了一个类似于此的问题，人们提供的解决方案也起了作用，但只有当我注释掉所有其他CSS代码时，它才起作用。由于某些原因，CSS干扰了JavaScript函数以使其正常工作。当我单击按钮时，我想将背景色更改为黑色，但当我再次单击该按钮时，我希望将其更改为白色。
<!DOCTYPE html>
<html>
<head>
<title>Light Switch</title>
<link rel="stylesheet" href="light.css" />
</head>
浏览 0提问于2018-03-16得票数 1
回答已采纳
1回答
如何在使用Javascript加载页面时更改按钮的切换状态？
javascript、html、css、button
我正在尝试构建一个简单的web应用程序，用户可以在其中个性化他的设置。在“设置”页面中，我有几个切换按钮，因此我需要在页面加载期间对按钮状态进行切换，以匹配数据库中的首选项。
切换按钮的CSS使用的是:在伪选择器之前(下面的代码)，那么在加载页面之前是否有方法用javascript更改按钮状态？谢谢
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
/* Hide default HTML checkbox */
.switch input {
浏览 3提问于2021-11-11得票数 1
2回答
如何确定CSS切换输入的“切换”状态？
html、css、toggle
我想实现一个基于CSS的切换/切换输入。我找到了以下链接的示例，这个链接非常简单，根本不使用javascript。问题在于它缺乏对如何确定“切换”状态的解释
这是供参考的完整代码：
/* The switch - the box around the slider */
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
/* Hide default HTML checkbox */
.switch input {display:none;}
/* The
浏览 1提问于2016-10-29得票数 0
回答已采纳
3回答
将文本放置在切换滑块内
html、css
我刚接触过CSS，有一个很简单的问题可以回答，不过我不确定该从哪个类开始。
我的目标是将文本(实际上是两位数字)放在切换按钮(移动的实际滑块，颜色是白色的)内。
我使用的是公共切换示例：
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.switch input {display:none;}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0
浏览 0提问于2018-02-01得票数 1
回答已采纳
3回答
如何只启用一个开关按钮
jquery、html、css、twitter-bootstrap
我在我的表单中有三个切换按钮，我希望用户可以打开一个按钮，而其他按钮则自动关闭。我不想在我的表单中使用典型的单选按钮。我的开关按钮来自：
我的html是：
<!-- Rectangular switch -->
<label class="switch">
<input type="checkbox">
<div class="slider"></div>
</label>
<!-- Rounded switch -->
<label class=
浏览 24提问于2017-02-10得票数 4
回答已采纳
1回答
CSS自定义复选框不隐藏：“后”和“：”元素
html、css、button、checkbox
我编写了这段CSS代码来创建自己的复选框：
input[type="checkbox"]{
display: none;
}
.checkbox{
position: relative;
width: 60px;
height: 19px;
background-color: green;
border-radius: 10px;
}
.checkbox input[type="checkbox"] + label{
left: 0%;
top: 0px;
cursor: pointer;
position: absol
浏览 3提问于2014-11-23得票数 1
回答已采纳
1回答
无法将文本与切换按钮对齐
html、css、angular-ui-bootstrap
<!DOCTYPE html>
<html>
<head>
<style>
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.switch input {display:none;}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-colo
浏览 3提问于2016-08-03得票数 2
回答已采纳
2回答
将文本与切换开关对齐
html、css
我按照w3schools的指示创建了一个html toggle switch，我想让文本在它的左边来解释滑块的作用，但它总是放在滑块的顶部，否则就会错过对齐。 /* The switch - the box around the slider */
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
/* Hide default HTML checkbox */
.switch input {
opacity: 0;
widt
浏览 29提问于2021-04-22得票数 0
回答已采纳
1回答
如何使用敲除键绑定切换按钮
html、css、knockout-3.0
我编写了下面的代码来查看Toggle的工作。但数据绑定似乎不起作用。
下面是HTML代码
<div>
<label class="switch">
<input type="checkbox" id="toggle123" data-bind="click:isToggleTrueOrFalse" />
<span class="slider round"></span>
浏览 1提问于2018-11-08得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
