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

Question

我在这里有css（手写笔）：

127.0.0.1

但是默认情况下，文本区域具有框阴影。这是codepen链接：

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

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  

在您的手写笔代码中，有一个.textarea，在.textarea:focus行之前没有样式。转换为：.textarea, .textarea:focus。 这是因为Stylus interprets a newline as equivalent to selector separators (commas in a rule set).。

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

请参阅Chrome检查器：