:focus 当 textarea 不在焦点上时应用样式

Question

我这里有css（手写笔）：

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

但文本区域默认有框阴影。这是代码笔link：

Answer 1

您的样式以默认 .textarea 也接收框阴影的方式堆叠：

.textarea

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

这呈现给

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

如果您从共享样式块中删除 .textarea，您会看到 :focus 样式在未聚焦时消失。

Answer 2

.textarea

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

在您的 Stylus 代码中，.textarea 在 .textarea:focus 行之前没有应用任何样式。这翻译成：.textarea, .textarea:focus。 这是因为Stylus interprets a newline as equivalent to selector separators (commas in a rule set)..

删除 .textarea 以修复您的代码。

见Chrome检查员：

:focus applying styles when textarea not actually in focus