Блог

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

Как мне установить цвет css для переключателя начальной загрузки?

#html #css #twitter-bootstrap

#HTML #css #twitter-bootstrap

Вопрос:

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

введите описание изображения здесь

Вот html и ссылка на начальную загрузку

 <div class="custom-control custom-switch ">
  <input type="checkbox" class="custom-control-input" id="customSwitch1" (click)="changeState($event)">
  <label class="custom-control-label text-yb" for="customSwitch1">Activate</label>
</div>

Ответ №1:

чтобы избежать использования !important для сброса цвета и bg-color, вы можете использовать filter:hue-rotate(xxdeg) ; через пользовательский класс

https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/hue-rotate ()

Функция hue-rotate() CSS изменяет оттенок элемента и его содержимого. Его результатом является <filter-function> .

Смотрите также: https://en.wikipedia.org/wiki/Hue

 .hr45::before {
  filter: hue-rotate(45deg)
}

.hr90::before {
  filter: hue-rotate(90deg)
}

.hr180::before {
  filter: hue-rotate(180deg)
}

.hr225::before {
  filter: hue-rotate(225deg)
}

.hr327brgtns108::before {
  filter: hue-rotate(327deg) brightness(108%);
}

html {
  display: grid;
  height: 100vh;
}

body {
  margin: auto;
}

label {
  color: #6BBECC;
} 
 <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />

<body class="m-auto">
  <div class="custom-control custom-switch ">
    <input type="checkbox" class="custom-control-input" id="customSwitch0" (click)="changeState($event)">
    <label class="custom-control-label text-yb hr327brgtns108" for="customSwitch0">Activate #17a2b8</label>
  </div>
  <div class="custom-control custom-switch ">
    <input type="checkbox" class="custom-control-input" id="customSwitch1" (click)="changeState($event)">
    <label class="custom-control-label text-yb hr45" for="customSwitch1">Activate lightpurple</label>
  </div>

  <div class="custom-control custom-switch ">
    <input type="checkbox" class="custom-control-input" id="customSwitch2" (click)="changeState($event)">
    <label class="custom-control-label text-yb hr90" for="customSwitch2">Activate pinkish </label>
  </div>

  <div class="custom-control custom-switch ">
    <input type="checkbox" class="custom-control-input" id="customSwitch3" (click)="changeState($event)">
    <label class="custom-control-label text-yb hr180" for="customSwitch3">Activate brownish </label>
  </div>

  <div class="custom-control custom-switch ">
    <input type="checkbox" class="custom-control-input hr180" id="customSwitch4" (click)="changeState($event)">
    <label class="custom-control-label text-yb hr225" for="customSwitch4">Activate greenish</label>
  </div>
</body>

Комментарии:

1. Спасибо. Я попытался найти оттенок #17a2b8 и увидел 188,2 градуса, но после того, как я применил его к функции поворота оттенка, он не отображается как правильный цвет после рендеринга. Какой правильный градус для #17a2b8?

2. @user1186050 вам также нужно будет сбросить яркость (): попробуйте : filter: hue-rotate(327deg) brightness(108%);

3. Спасибо! есть ли веб-сайт, который я могу посетить, чтобы найти эти вычисленные значения?

4. вики показывает вам линейку, которая позволяет вам узнать градусы, которые вы можете задать для среднего оттенка — поверните 0-360deg ваш синий был в среднем 230, а ваш цвет в среднем 200, так что 360 — 30 — это средний 330, с которого я начал . Способ, которым я это сделал, заключался в том, чтобы поместить пользовательский ввод на заднем плане того цвета, который вы пытаетесь получить. В какой-то момент это будет нормально, слишком темно или слишком ярко. вы можете завершить настройку с помощью contrast() и / или brightness() . для нужной вам математики было бы проще начать с цвета rgb (), но я недостаточно долго ходил в школу, чтобы эффективно помочь здесь 🙂

5. любой цвет, который вы хотите повернуть, будет установлен на 0/360. линейки начинаются с красного, а синий — с 240

Ответ №2:

Просто добавьте это в свой файл css или добавьте его в свой html-файл между <style> … </style> , чтобы изменить цвет фона переключателя — он также удаляет или изменяет синий круг и тень. =]

 .form-switch .form-check-input {
    height: 24px;
    width: 48px;
}
.form-switch .form-check-input:focus {
    border-color: rgba(0, 0, 0, 0.25);
    outline: 0;
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    background-image: url("data:image/svg xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba(0,0,0,0.25)'/></svg>");
}
.form-switch .form-check-input:checked {
    background-color: #30D158;
    border-color: #30D158;
    border: none;
    background-image: url("data:image/svg xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba(255,255,255,1.0)'/></svg>");
}