トグルスイッチボタン - 反応測定を設定するには？

Question

私はThisトグルボタンを作成しました。サイズをパーセンテージに設定することはできません。私はビューポートの幅と高さにテキストを設定することができました - それはうまくいっていますが、ビューポートの測定にボタンを必要としません....

おそらく:: beforeと:: afterはパーセンテージ？

HTML：

<div class="cont"> 
     <div class="box"> 
     <div class="material-switch"> 
      <input id="someSwitchOptionDefault" name="someSwitchOption001" 
      type="checkbox" /> 
      <label for="someSwitchOptionDefault" class="label-default"><span 
      class="homme">Homme</span><span class="femme">Femme</span> 
      </label> 
     </div> 
     </div> 
    </div> 

のCss：

 .cont { 
     padding: 50px; 
     background-color: #e9e9e9; 
     width: 100vw; 
     height: 100vh; 
     } 

     .box { 
     width: 100px; 
     height: 100px; 
     } 

     .material-switch > input[type="checkbox"] { 
     display: none; 
     } 

     .material-switch > label { 
     cursor: pointer; 
     height: 0px; 
     position: relative; 
     width: 40px; 
     } 

     .material-switch > input[type="checkbox"] + label::before { 
     content: "\f222"; 
     font-family: FontAwesome; 
     font-style: normal; 
     font-weight: normal; 
     text-decoration: inherit; 
     color: #333333; 
     text-align: right; 
     border: 1px solid #dcdcdc; 
     padding-left: 10px; 
     padding-right: 10px; 
     } 

     .material-switch > label::before { 
     background-color: #f6f6f6; 
     border-radius: 16px; 
     height: 24px; 
     margin-top: -12px; 
     position: absolute; 
     width: 100px; 
     } 

     .material-switch > label::after { 
     /*--button---*/ 
     content: ""; 
     font-size: 18px; 
     background-color: #fff; 
     border-radius: 15px; 
     height: 24px; 
     left: -4px; 
     margin-top: -8px; 
     position: absolute; 
     top: -4px; 
     width: 73px; 
     border: 1px solid #dcdcdc; 
     } 

     .material-switch > input[type="checkbox"]:checked + label::before { 
     background-color: #f6f6f6; 
     content: "\f221"; 
     color: "blue"; 
     font-family: FontAwesome; 
     text-align: left; 
     } 

     .material-switch > input[type="checkbox"]:checked + label::after { 
     background-color: #fff; 
     left: 30px; 
     } 

     .femme { 
     display: none; 
     } 

     .material-switch > input[type="checkbox"]:checked + label>span.homme { 
     display: none; 
     } 

     .material-switch > input[type="checkbox"]:checked + label>span.femme { 
     display: block; 
     } 

     .homme { 
     font-family: 'Roboto Light', sans-serif; 
     font-style: normal; 
     font-weight: normal; 
     text-decoration: inherit; 
     color: #5d5d5d; 
     font-size: 1vw; 
     position: absolute; 
     top: -8px; 
     left: 9px; 
     z-index: 999; 
     } 

     .femme { 
     font-family: 'Roboto Light', sans-serif; 
     font-style: normal; 
     font-weight: normal; 
     text-decoration: inherit; 
     color: #5d5d5d; 
     font-size: 1vw; 
     position: absolute; 
     top: -8px; 
     z-index: 999; 
     } 

     .material-switch > input[type="checkbox"]:checked + label .femme { 
     left: 41px; 
     } 

     .homme::before { 
     content: "\f222"; 
     font-family: FontAwesome; 
     font-style: normal; 
     font-weight: normal; 
     text-decoration: inherit; 
     color: #49c8c1; 
     margin-right: 5px; 
     } 

     .femme::before { 
     content: "\f221"; 
     font-family: FontAwesome; 
     font-style: normal; 
     font-weight: normal; 
     text-decoration: inherit; 
     color: #49c8c1; 
     margin-right: 5px; 
     } 

Answer 1

私はcssにあなたが<input>コンポーネントのように、HTMLのDOMプロパティの多くを上書きしていることがわかります。シンプルでエレガントなトグルボタンを通常のCSSで使用することをお勧めします。 あなたはトグルボタンの下に例確認することができます：あなたの実際の要件が何であるかを

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_switch https://codepen.io/mburnette/pen/LxNxNg