Active Pseudo CSS class 不适用于 Firefox 中的文本框

Question

我正在尝试在 Firefox 的文本框上使用 Active Pseudo CSS class，但它似乎不起作用。任何人都可以建议我一个解决方案。下面是我正在使用的 css 代码：

悬停工作正常。但是在单击文本框时，应该应用了活动 class，但实际上没有。

.txtLogin 
{
width: 100px;
float: right;
padding: 1px !important;
border: 1px solid #ccc;
height: 20px;
font-size: 12px;
font-weight: normal;
color: #000;
font-family: Arial;
}

.txtLogin:hover
{
    background: #ededed;
    border: 1px solid #bfbfbf;
    border-top: 1px solid #b5b5b5;
}
.txtLogin:active
{
    background: #d9d9d9;
    border: 1px solid #bfbfbf !important;
}

Answer 1

我觉得你是在寻找焦点。像下面这样尝试。

.txtLogin:focus
{
background: #ff00ff;
border: 1px solid #bfbfbf !important;
outline:none;
}

DEMO

Answer 2

:active 仅在按住鼠标按钮时适用...当松开鼠标按钮时它会被移除。

在你的情况下，伪class正在工作，只是，我怀疑，不是你想的那样。

@MDN

The :active CSS pseudo-class matches when an element is being activated by the user. It allows the page to give a feedback that the activation has been detected by the browser. When interacting with a mouse, this is typically the time between the user presses the mouse button and releases it. The :active pseudo-class is also typically matched when using the keyboard tab key. It is frequently used on and HTML elements, but may not be limited to just those.

body {
  background: lightblue;
}
.txtLogin {
  width: 200px;
  padding: 1px !important;
  border: 1px solid #ccc;
  height: 20px;
  font-size: 12px;
  font-weight: normal;
  color: #000;
  font-family: Arial;
}
.txtLogin:hover {
  background: #ededed;
  border: 1px solid #bfbfbf;
  border-top: 1px solid #b5b5b5;
}
.txtLogin:active {
  background: #d9d9d9;
  border: 1px solid #bfbfbf !important;
}

<input type="textarea" class="txtLogin">

Answer 3

我为此提出了一个错误，mozilla 现在已经修复了这个错误。这是错误 ID https://bugzilla.mozilla.org/show_bug.cgi?id=1168055。他们为此提供了一个补丁。

Active Pseudo CSS class 不适用于 Firefox 中的文本框

Active Pseudo CSS class not working for textbox in Firefox

css

firefox

css-selectors