Как изменить цвет фона флажка? - PullRequest
Новая
       19

Как изменить цвет фона флажка?

1 голос
/ 03 февраля 2020

Я использую Material.io для своего интерфейса и создаю флажок: 

<div class="mdc-form-field">
  <div class="mdc-checkbox">
    <input type="checkbox"
           class="mdc-checkbox__native-control"
           id="checkbox-1"/>
    <div class="mdc-checkbox__background">
      <svg class="mdc-checkbox__checkmark"
           viewBox="0 0 24 24">
        <path class="mdc-checkbox__checkmark-path"
              fill="none"
              d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
      </svg>
      <div class="mdc-checkbox__mixedmark"></div>
    </div>
    <div class="mdc-checkbox__ripple"></div>
  </div>
  <label for="checkbox-1">Checkbox 1</label>
</div>

Как это:

https://material-components.github.io/material-components-web-catalog/# / component / checkbox

Как изменить фон флажка на другой цвет, например красный?

Ответы [ 3 ]

1 голос
/ 03 февраля 2020

Он имеет свои собственные классы для фона, например, если вы осмотрите и увидите структуру флажка, в котором есть div, для которого присутствует класс .mdc-checkbox__background, вы можете просто изменить его с помощью !important, чтобы переопределить значение по умолчанию 

.mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background, .mdc-checkbox__native-control:enabled:indeterminate~.mdc-checkbox__background {
    border-color: red !important;
    background-color: red !important;
}
1 голос
/ 03 февраля 2020

Вы можете использовать --mdc-theme-secondary:#ff0000, чтобы изменить свой цвет: 

<div class="mdc-form-field">
  <div class="mdc-checkbox" style="--mdc-theme-secondary:#ff0000">
    <input type="checkbox"
           class="mdc-checkbox__native-control"
           id="checkbox-1"/>
    <div class="mdc-checkbox__background">
      <svg class="mdc-checkbox__checkmark"
           viewBox="0 0 24 24">
        <path class="mdc-checkbox__checkmark-path"
              fill="none"
              d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
      </svg>
      <div class="mdc-checkbox__mixedmark"></div>
    </div>
    <div class="mdc-checkbox__ripple"></div>
  </div>
  <label for="checkbox-1">Checkbox 1</label>
</div>
1 голос
/ 03 февраля 2020

Они используют другой элемент для стилизации флажка.

Элемент: <div class="mdc-checkbox__background">

И селектор это: .mdc-checkbox__native-control:enabled:checked ~ .mdc-checkbox__background, .mdc-checkbox__native-control:enabled:indeterminate ~ .mdc-checkbox__background

Так что все вам нужно добавить эту строку в таблицу стилей: 

.mdc-checkbox__native-control:enabled:checked ~ .mdc-checkbox__background, .mdc-checkbox__native-control:enabled:indeterminate ~ .mdc-checkbox__background {
  border-color: red;
  background-color: red;
}

Подсказка: используйте инструменты разработки на firefox или chrome. Щелкните правой кнопкой мыши на элементе, который вы хотите проверить, а затем выберите параметр inspect.

Удачи и наслаждайтесь кодом!

...