Css не может изменить цвет фона переключателя

Я обнаружил, что это переключатель неморфизма, и не могу понять, как изменить фон, если он отмечен. Я понимаю, насколько прост этот вопрос. Я делал это несколько раз с основными переключателями, но мне кажется, что либо я сбит с толку, либо этот шаблон проектирования игнорирует мои попытки.

До сих пор я пробовал разные решения, такие как:

input[type = "checkbox"]:checked {
background: red
}

или же

.toggle:checked {
background: red
}

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

body {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-family: 'IBM Plex Sans Condensed', sans-serif;
  font-weight: 300;
  background-color: #ecf0f3;
}

.label {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  color: #394a56;
}

.label-text {
  margin-left: 16px;
}

.toggle {
  position: relative;
  height: 30px;
  width: 60px;
  border-radius: 15px;
  overflow: hidden;
  box-shadow:
    -8px -4px 8px 0px #ffffff,
    8px 4px 12px 0px #d1d9e6,
    4px 4px 4px 0px #d1d9e6 inset,
    -4px -4px 4px 0px #ffffff inset;
}

.toggle-state {
  display: none;
}

input[type=checkbox] {
  background: yellow
}

.indicator {
  height: 100%;
  width: 200%;
  background: #ecf0f3;
  border-radius: 15px;
  transform: translate3d(-75%, 0, 0);
  transition: transform 0.4s cubic-bezier(0.85, 0.05, 0.18, 1.35);
  box-shadow:
    -8px -4px 8px 0px #ffffff,
    8px 4px 12px 0px #d1d9e6;
}

.toggle-state:checked ~ .indicator {
  transform: translate3d(25%, 0, 0);
}

<label class = "label">
  <div class = "toggle">
    <input class = "toggle-state" type = "checkbox" name = "check" value = "check" />
    <div class = "indicator"></div>
  </div>
  <div class = "label-text">change toggle background</div>
</label>

Вы хотите изменить фон круглой кнопки или фон таблетки?

— 06.04.2021 12:55

@ m4n0 Я пытаюсь изменить фон заливки.

— 06.04.2021 13:17

Вы не можете изменить фон самого флажка, потому что флажок скрыт. Он заменен на div .toggle, поэтому вместо этого вам нужно установить его фон.

— 06.04.2021 17:31

html css

06.04.2021 12:43

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Вы пытаетесь применить фон к входным данным, но класс индикатора переопределяет его. Почему бы не передать это свойство самому классу показатель?

body {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-family: 'IBM Plex Sans Condensed', sans-serif;
  font-weight: 300;
  background-color: #ecf0f3;
}

.label {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  color: #394a56;
}

.label-text {
  margin-left: 16px;
}

.toggle {
  position: relative;
  height: 30px;
  width: 60px;
  border-radius: 15px;
  overflow: hidden;
  box-shadow:
    -8px -4px 8px 0px #ffffff,
    8px 4px 12px 0px #d1d9e6,
    4px 4px 4px 0px #d1d9e6 inset,
    -4px -4px 4px 0px #ffffff inset;
}

.toggle-state {
  display: none;
}

input[type=checkbox] {
  background: yellow
}

.indicator {
  height: 100%;
  width: 200%;
  background: #ecf0f3;
  border-radius: 15px;
  transform: translate3d(-75%, 0, 0);
  transition: transform 0.4s cubic-bezier(0.85, 0.05, 0.18, 1.35);
  box-shadow:
    -8px -4px 8px 0px #ffffff,
    8px 4px 12px 0px #d1d9e6;
}

.toggle-state:checked ~ .indicator {
  transform: translate3d(25%, 0, 0);
  background: red;
}

<label class = "label">
  <div class = "toggle">
    <input class = "toggle-state" type = "checkbox" name = "check" value = "check" />
    <div class = "indicator"></div>
  </div>
  <div class = "label-text">change toggle background</div>
</label>

@Sumodh_Nair У меня тоже было, но я все еще хочу изменить фон заливки вместо круглого индикатора. Мне это не кажется таким уж чистым, это дело вкуса.

— 06.04.2021 13:19

06.04.2021 12:53

body {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-family: 'IBM Plex Sans Condensed', sans-serif;
  font-weight: 300;
  background-color: #ecf0f3;
}

.label {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  color: #394a56;
}

.label-text {
  margin-left: 16px;
}

.toggle {
  position: relative;
  height: 30px;
  width: 60px;
  border-radius: 15px;
  overflow: hidden;
  box-shadow:
    -8px -4px 8px 0px #ffffff,
    8px 4px 12px 0px #d1d9e6,
    4px 4px 4px 0px #d1d9e6 inset,
    -4px -4px 4px 0px #ffffff inset;
}

.toggle-state {
  display: none;
}

  input[type=checkbox]:checked ~ .indicator {
  background: red;
   }

.indicator {
  height: 100%;
  width: 200%;
  background: #ecf0f3;
  border-radius: 15px;
  transform: translate3d(-75%, 0, 0);
  transition: transform 0.4s cubic-bezier(0.85, 0.05, 0.18, 1.35);
  box-shadow:
    -8px -4px 8px 0px #ffffff,
    8px 4px 12px 0px #d1d9e6;
}

.toggle-state:checked ~ .indicator {
  transform: translate3d(25%, 0, 0);
}

<label class = "label">
  <div class = "toggle">
    <input class = "toggle-state" type = "checkbox" name = "check" value = "check" />
    <div class = "indicator"></div>
  </div>
  <div class = "label-text">change toggle background</div>
</label>

@Gaurav_Shukla благодарит за ваш вклад, но я ищу решение, чтобы изменить цвет заливки за круглым индикатором.

— 06.04.2021 13:28

@ICoded добро пожаловать. Но я постараюсь исправить вашу ошибку.

— 06.04.2021 13:31

06.04.2021 13:24

Ответ принят как подходящий

Вам не нужно помещать ввод внутри div, вы можете поместить его перед ним, и пока он находится в ярлыке, он будет работать нормально. И тогда вы можете обновить селекторы

body {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-family: 'IBM Plex Sans Condensed', sans-serif;
  font-weight: 300;
  background-color: #ecf0f3;
}

.label {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  color: #394a56;
}

.label-text {
  margin-left: 16px;
}

.toggle {
  position: relative;
  height: 30px;
  width: 60px;
  border-radius: 15px;
  overflow: hidden;
  box-shadow:
    -8px -4px 8px 0px #ffffff,
    8px 4px 12px 0px #d1d9e6,
    4px 4px 4px 0px #d1d9e6 inset,
    -4px -4px 4px 0px #ffffff inset;
  transition: background 0.3s ease;
}

.toggle-state {
  display: none;
}

.indicator {
  height: 100%;
  width: 200%;
  background: #ecf0f3;
  border-radius: 15px;
  transform: translate3d(-75%, 0, 0);
  transition: transform 0.4s cubic-bezier(0.85, 0.05, 0.18, 1.35);
  box-shadow:
    -8px -4px 8px 0px #ffffff,
    8px 4px 12px 0px #d1d9e6;
}

input[type=checkbox] +.toggle { /* Now you can select the div next to the input */
  background: yellow
}

.toggle-state:checked + .toggle {
  background: red;
}
.toggle-state:checked + .toggle .indicator {
  transform: translate3d(25%, 0, 0);
}

<label class = "label">
  <input class = "toggle-state" type = "checkbox" name = "check" value = "check" /> 
  <div class = "toggle">
    <div class = "indicator"></div>
  </div>
  <div class = "label-text">change toggle background</div>
</label>

06.04.2021 13:30

Другие вопросы по теме

Как сделать неактивный значок внутри интерактивного div?

Есть ли способ остановить автоматическое воспроизведение слайда карусели начальной загрузки?

Как отменить выбор дочернего меню навигации в Oracle Apex?

Внедрение углового стиля в <head> </head>

Проблема с анимацией SVG

Как сделать анимацию в React, как на целевой странице iphone 12pro

Темный режим CSS не работает на мобильных устройствах

Почему внезапно перестали работать мои заголовок и центральные теги?

Как окружить наложенное (z-индексированное) изображение окружающим кольцом прозрачности?

Создание пустого и редактируемого столбца после таблицы с помощью JavaScript

Css не может изменить цвет фона переключателя

Ответы 3

Другие вопросы по теме

Похожие вопросы