: фокусировка применяя стили, когда текстовая область не в фокусе

Question

У меня есть css (стилус) здесь:

.textarea:focus
   box-shadow: 0px 0px 73px 5px primary-color 

, но текстовая область по умолчанию имеет тень от поля.Вот кодовая ссылка:

https://codepen.io/Tycholiz22/pen/vbGMLJ?editors=1100

Answer 1

.textarea

.textarea:focus
  box-shadow: 0px 0px 73px 5px primary-color  

В вашем коде стилуса есть .textarea, к которому не применяются стили непосредственно перед строкой .textarea:focus.Это переводится на: .textarea, .textarea:focus. Это потому, что Стилус интерпретирует новую строку как эквивалент разделителей селектора (запятые в наборе правил). .

Удалите .textarea, чтобы исправить ваш код.

См. Инспектор Chrome:

Answer 2

Ваши стили сложены таким образом, что по умолчанию .textarea также получает тень от поля:

.textarea

.textarea:focus
  box-shadow: 0px 0px 73px 5px primary-color

Это отдает на

.textarea, .textarea:focus {
    box-shadow: 0px 0px 73px 5px #09ae96;
}

Если вы удалите .textarea из общего блока стилей вы увидите, что стиль :focus исчезнет, ​​когда не сфокусирован.