如何在不使用 transform: scale 的情况下更改 CSS 切换开关的大小？
Posted
技术标签:
【中文标题】如何在不使用 transform: scale 的情况下更改 CSS 切换开关的大小？【英文标题】：How to change the size of a css toggle switch without using transform: scale? 【发布时间】：2020-05-17 13:15:44 【问题描述】：我正在为一个名为 elementor 的插件设计一个元素。这个项目真的只是为了帮助我学习为 wordpress 开发的功能。
我正在制作的是一个“切换内容”滑块，可以在文本或预定义的 html 之间切换。我根据本指南使用了滑块：https://www.w3schools.com/howto/howto_css_switch.asp
我在开关旁边有两个这样的标题：
我想使用 elementors php 工具通过 css 实时调整滑块大小。 transform: scale() 可以正常工作，它只是不会移动其他任何东西，而且是一种非常粗糙的方法。有没有其他方法可以缩放这个元素来移动边距？我已经看到另一个插件通过更改“字体大小”来做类似的事情。这似乎对我不起作用。
.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> 【问题讨论】：
【参考方案1】：这可以通过将构成开关尺寸的所有静态值从px 更改为em 来实现。
通过使用这种方法，您可以使用font-size 属性来更改元素的大小。这将产生所需的尺寸效果，同时也会影响文档布局。
.switch
position: relative;
display: inline-block;
width: 3.75em;
height: 2.125em;
.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: 1.625em;
width: 1.625em;
left: 0.25em;
bottom: 0.25em;
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(1.625em);
-ms-transform: translateX(1.625em);
transform: translateX(1.625em);
/* Rounded sliders */
.slider.round
border-radius: 2.125em;
.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>
<label class="switch" style="font-size: 2rem">
<input type="checkbox" checked>
<span class="slider round"></span>
</label>
</body>
</html>【讨论】：
以上是关于如何在不使用 transform: scale 的情况下更改 CSS 切换开关的大小？的主要内容，如果未能解决你的问题，请参考以下文章
css3中transition 过渡效果如何只对transform:scale 起作用，对其它像transform: translate不起作用！
css中设置transform:scale后，之前设置为fixed的div就都不会固定在屏幕上了，如何解决？