更改活动输入选择器的背景颜色答案

【问题标题】：Changing the background colour of an active input selector更改活动输入选择器的背景颜色
【发布时间】：2017-02-21 00:59:35
【问题描述】：

我运行此代码时的任何原因，

input[type=submit]:active {
  background-color: green;
}

当我单击所需的按钮时，它只闪烁绿色片刻，然后返回原始颜色？我怎样才能让它永久保持绿色？

【问题讨论】：

【解决方案1】：

您还需要使用:focus 选择器。

然后将背景颜色添加到输入中，因为它是焦点元素。

input[type=submit]:active, input[type=submit]:focus {
  background-color: green;
}

&lt;input type="submit" /&gt;

【讨论】：

【解决方案2】：

input[type=submit]:focus {
    background-color: green;
}

试试这个

【讨论】：

很高兴为您提供帮助 :)
但请注意，当用户聚焦时（例如点击外部）焦点选择器将消失，默认颜色将返回。如果你想要那个永久，你应该为背景颜色创建类并使用 js 添加它。不熟悉js的可以加attr输入onclick="this.style.backgroundColor = '#000'"
你能再解释一下吗，因为这是我的下一个问题..我正在使用 reactjs 这个
<input type="submit" onclick="this.style.backgroundColor = '#000'"> react应该没问题，因为是纯js解决方案
没有更好的方法吗？我已经在 onClick 函数上调用了一个方法