如何在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%; 
} 

結果：

results

Answer 1

嘗試移動在輸入元素之外標記內容並使用for屬性以確保點擊通過。這應該比以前做的更容易。

label.switch input { 
 
    display: block; 
 
}

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

注意：您也可以在你的HTML錯誤。 className應該是class（編輯：除非你使用React）