我正在为一个名为 elementor 的插件设计一个元素。这个项目实际上只是为了帮助我学习 WordPress 开发的功能。
我正在制作一个“切换内容”滑块，可以在文本或预定义的 html 之间切换。我根据本指南使用了滑块：https://www.w3schools.com/howto/howto_css_switch.asp https://www.w3schools.com/howto/howto_css_switch.asp现在开关的尺寸非常大。我想要一个小开关。怎样才能改变呢？谁能帮我吗？谢谢。
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
</style>
</head>
<body>
<h2>Toggle Switch</h2>
<label class=" switch">
<input type="checkbox" checked>
<span class=" slider round"></span>
</label>
</body>
</html>
I used calc(); and var();，所以你不需要做很多工作
Mozilla 文档：计算（）解释 https://developer.mozilla.org/en-US/docs/Web/CSS/calc() and var() 解释 https://developer.mozilla.org/en-US/docs/Web/CSS/var() and --var: ;解释 https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties .
只是改变ONE value 开关高度改变一切响应！
* {
--switch-height: 34px; /* change the value */
/* other code, pls see it then */
}
如果你想要一个更小的开关，8px默认填充，会占用大量空间，
所以我为你简化了它！只需更改--switch-padding: 8px;到更小的东西...
CSS 会自动为您计算所有内容，以便进行切换看起来不错 for 所有尺寸 :)
同样的事情，如果你想让开关更大，记得让填充也更大（填充变量）
我知道这不是一个网站“we-are-doing-your-work.com”，但我真的很想帮助您！
这里是完整的固定代码：
* {
--switch-height: 34px;
--switch-padding: 8px;
--switch-width: calc((var(--switch-height) * 2) - var(--switch-padding));
--slider-height: calc(var(--switch-height) - var(--switch-padding));
--slider-on: calc(var(--switch-height) - var(--switch-padding));
}
.switch {
position: relative;
display: inline-block;
width: var(--switch-width);
height: var(--switch-height);
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
content: "";
position: absolute;
height: var(--slider-height);
width: var(--slider-height);
left: calc(var(--switch-padding) / 2);
bottom: calc(var(--switch-padding) / 2);
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked+.slider {
background-color: #2196F3;
}
input:focus+.slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked+.slider:before {
transform: translateX(var(--slider-on));
}
.slider.round {
border-radius: var(--slider-height);
}
.slider.round:before {
border-radius: 50%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h2>Toggle Switch</h2>
<label class="switch">
<input type="checkbox" checked>
<span class="slider round"></span>
</label>
</body>
</html>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
