Bootstrap 4: корневой цвет отображает недопустимое значение свойства

Question

Я пытался использовать bootstrap 4: свойство Root color, но я получаю ошибку invalid property value

Я также проверил документацию по начальной загрузке и ничего не нашел.

Может кто-нибудь помочь мне, как мнеиспользуйте bootstrap 4 :root property

проверьте ниже фрагмент, я пытался достичь, но не удалось.

также не получаю ошибку в netbeans

заранее спасибо

:root {
  --blue: #007bff;
  --indigo: #6610f2;
  --purple: #6f42c1;
  --pink: #e83e8c;
  --red: #dc3545;
  --orange: #fd7e14;
  --yellow: #ffc107;
  --green: #28a745;
  --teal: #20c997;
  --cyan: #17a2b8;
  --white: #fff;
  --gray: #6c757d;
  --gray-dark: #343a40;
  --primary: #007bff;
  --secondary: #6c757d;
  --success: #28a745;
  --info: #17a2b8;
  --warning: #ffc107;
  --danger: #dc3545;
  --light: #f8f9fa;
  --dark: #343a40;
  --breakpoint-xs: 0;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
}

.frm-input:focus {
  border-color: --yellow;
}

<div class="frm-row">
  <input class="frm-input" type="text" name="email" placeholder="Email address">
</div>

Answer 1

Это CSS-переменные .Ссылка на них с var(--..).В вашем случае это будет:

.frm-input:focus {
  border-color: var(--yellow);
}

Демо: https://www.codeply.com/go/I2WpYQe8oG

Также обратите внимание: Netbeans в настоящее время не поддерживает переменные CSS. Netbeans показывает переменные css как ошибку

---

Связанный: CSS использует цвет из другого класса?

Answer 2

В вашем синтаксисе есть ошибка. Попробуйте это:

.frm-input:focus {
  border-color: var(--yellow);
}

Кроме того, селектор: root (или псевдокласс) не поставляется с начальной загрузкой 4, это встроенная функция CSS. Вы можете прочитать больше об этом в этой документации . Вкратце, это относится к корневому элементу документа. В общем, вы определяете переменные CSS для корневого элемента документа, который не имеет ничего общего с начальной загрузкой.

Более того, Netbeans еще не реализовал поддержку переменных CSS, здесь .