Блог

Главная - Вопросы по программированию - как настроить переключатель начальной загрузки

как настроить переключатель начальной загрузки

#css #bootstrap-4 #togglebutton

#css #bootstrap-4 #кнопка переключения

Вопрос:

У меня возникли проблемы с настройкой моей кнопки переключения начальной загрузки. Кажется, я не могу заставить какой-либо стиль работать.

Мне действительно нужно только увеличить его ширину, но даже это не работает. Вот ссылка на jsfiddle. Я хочу, чтобы переключатель стал немного больше. любая помощь приветствуется!

 <div class="col-sm-1 col-lg-3">
  <label>Show available teams only</label>
  <div class="custom-control custom-switch">
    <input type="checkbox" class="custom-control-input form-control" id="checkboxx">
    <label class="custom-control-label" for="checkboxx"></label>
  </div>
</div>

еще раз, если бы кто-нибудь мог указать мне, как стилизовать кнопку переключения начальной загрузки, я был бы очень признателен!

Ответ №1:

Измените ширину label::before, чтобы увеличить ширину

 .custom-switch .custom-control-label::before {
width:50px !important;

}

Чтобы создать отмеченную метку: после в соответствии с меткой: перед изменением размера преобразования, как указано ниже

 .custom-switch .custom-control-input:checked~.custom-control-label::after {
background-color: #fff;
transform: translateX(1.75rem)!important;

}

!важно — изменить предопределенную начальную загрузку css с помощью нашего css

Перед внесением изменений в ваш файл попробуйте проверить элемент, это устранит ваши сомнения

Метки: