Изменение стиля кнопки

Question

Я хочу изменить стиль кнопки переключения следующим образом.

Это мой пример кода:

<div class="form-group has-feedback">
  <input id="wffm302ebacf2b634d59b0dc1e81e451bc8d_Sections_0__Fields_6__Id" name="wffm302ebacf2b634d59b0dc1e81e451bc8d.Sections[0].Fields[6].Id" type="hidden" value="{D7AB5D2E-444F-49C7-91E4-564496D7C8A2}">
  <div>
    <input data-val="true" data-val-required="The Value field is required." id="wffm302ebacf2b634d59b0dc1e81e451bc8d_Sections_0__Fields_6__Value" name="wffm302ebacf2b634d59b0dc1e81e451bc8d.Sections[0].Fields[6].Value" type="checkbox" value="true" autocomplete="off" style="display: none;">
    <span class="button-checkbox bootstrap-checkbox">
      <button type="button" class="btn clearfix custom-btn">
        <span class="icon fa fa-check theme-text" style="display:none;"></span>
        <span class="icon fa fa-check-square"></span>
        <span class="icon cb-icon-check-indeterminate" style="display:none;"></span>
      </button>
    </span>
    <label class="switch">
      <input name="wffm302ebacf2b634d59b0dc1e81e451bc8d.Sections[0].Fields[6].Value" type="checkbox" value="false">
      <span class="slider round"></span>
    </label>
  </div>
  <span class="field-validation-valid help-block" data-valmsg-for="wffm302ebacf2b634d59b0dc1e81e451bc8d.Sections[0].Fields[6].Value" data-valmsg-replace="true"></span>
</div>

Пример Jsfiddle

Я попробовал немного CSS, но это не совсем то, что я хочу.Я попробовал:

  .switchbtn:before {
    position: absolute;
    content: "";
    height: 32px;
    width: 26px;            
    background-color: black;
    -webkit-transition: .4s;
    transition: .4s;
}

Answer 1

Вы на правильном пути.Вы можете использовать псевдо CSS-селекторы :before и :after, чтобы изменить внешний вид кнопки переключения.Поскольку :before уже используется для создания кругового переключателя, я использовал :after для добавления текста.Очевидно, что есть и другие способы сделать это, и ниже приведен просто быстрый способ показать вам, как этого добиться.

Обратите внимание, что вам придется изменить псевдоселекторы для обоих состояний (нормальное иchecked) так как вам нужны разные цвета.

Проверьте фрагмент кода ниже и используйте его в качестве отправной точки для изменения / настройки стилей в соответствии с вашими потребностями.

Надеюсь, это поможет.

  .switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
  }

  .switch input {
    opacity: 0;
    width: 0;
    height: 0;
  }

  .switchbtn {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    border: 2px solid #bbb;

    -webkit-transition: .4s;
    transition: .4s;
  }

 .switchbtn:before {
    position: absolute;
    content: "";
    height: 34px;
    width: 34px;
    left: -2px;
    top: -2px;
    background-color: black;
    -webkit-transition: .4s;
    transition: .4s;
  
  }
  
 .switchbtn:after {
    position: absolute;
    content: "OFF";
    right: 3px;
    top: 10px;
    font-size: 9px;
    font-family: 'Arial';
    -webkit-transition: .4s;
    transition: .4s;
  }

  input:checked+.switchbtn {
    background-color: white;
    border: 2px solid #2196F3;
  }

  input:focus+.switchbtn {
    box-shadow: 0 0 1px #2196F3;
  }

  input:checked+.switchbtn:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
    background-color: #2196F3;
  }
  
  input:checked+.switchbtn:after {
    position: absolute;
    content: "ON";
    left: 7px;
    top: 10px;
    font-size: 9px;
    font-family: 'Arial';
    -webkit-transition: .4s;
    transition: .4s;
  }

  /* Rounded sliders */

  .switchbtn {
    border-radius: 34px;
  }

  .switchbtn:before {
    border-radius: 50%;
  }

  .switch button {
    display: none;
  }

<label class="switch">
    <input class="switchbtn" data-val="true" data-val-required="The Value field is required." id="wffm302ebacf2b634d59b0dc1e81e451bc8d_Sections_0__Fields_6__Value" name="wffm302ebacf2b634d59b0dc1e81e451bc8d.Sections[0].Fields[6].Value" type="checkbox" value="true" autocomplete="off" style="display: none;" aria-invalid="false" aria-describedby="wffm302ebacf2b634d59b0dc1e81e451bc8d\.Sections\[0\]\.Fields\[6\]\.Value-error wffm302ebacf2b634d59b0dc1e81e451bc8d\.Sections\[0\]\.Fields\[6\]\.Value-error">
    <span class="button-checkbox bootstrap-checkbox switchbtn">
    <button type="button" class="btn clearfix custom-btn">
    <span class="icon fa fa-check theme-text" style="display: none;"></span>
    <span class="icon fa fa-check-square" style="display: inline;"></span>
    <span class="icon cb-icon-check-indeterminate" style="display:none;"></span>
    </button></span><input name="wffm302ebacf2b634d59b0dc1e81e451bc8d.Sections[0].Fields[6].Value" type="hidden" value="false">
</label>

Надеюсь, это поможет.