htmlのトグルスイッチにタイトルを追加するには？

Question

私は、その上のトグルスイッチにタイトルを追加しようとしています。しかし、スイッチ自体の背後に隠れています。私がフォントを増やすと、私はそれを見ます。しかし、私はフォントを増やしたくありません。コードスニペットとその結果を以下に示します。

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

を移動してみてください入力要素の外側のコンテンツにラベルを付け、を使用する属性を使用して、クリックスルーを確実にします。これは、あなたが以前にやっていたことよりもスタイルを簡単にするはずです。

label.switch input { 
 
    display: block; 
 
}

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

注：あなたは、あなたのHTMLのエラーを持っています。 classNameはclassでなければなりません（編集：Reactを使用している場合を除く）