如何在 html 中为切换开关添加标题?

Question

我正在尝试在html中为其上方的切换开关添加标题。但是，它隐藏在交换机本身后面。当我增加字体时，我确实看到了它。但是，我不想增加字体。以下是代码片段及其结果：

.HTML：

<label className="hrow switch form-group pull-right">
<input type="checkbox"><span className="slider round"></span>Active</input>
</label>

CSS(用于交换机(：

/* 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 slider */
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: lightgray;
-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: #85a3e0;
}
input:focus + .slider {
box-shadow: 0 0 1px #85a3e0;
}
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%;
}

结果：

结果

Answer 1

尝试将标签内容移到输入元素之外，并使用for属性来确保点击通过。这应该比你以前做的更容易设置样式。

label.switch input {
display: block;
}

<label class="switch" for="checky">
Active
<input id="checky" type="checkbox">
</label>

注意：您的 HTML 中也有错误。className应该是class的(编辑：除非你正在使用 React(