active伪类CSS不能在Firefox工作文本框(Active Pseudo CSS class

我想用在Firefox的文本框中active伪CSS类，但看来似乎是行不通的。 可以在任何一个建议我一个解决方案。 下面是我使用的CSS代码：

悬停工作正常。 但点击文本框，活动类应该已经被应用，但它不是。

.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:

:active当鼠标按键被按下只适用...鼠标按钮松开时会被删除。

在你的情况下，伪类的工作，只是，我怀疑，而不是在自己所想的方式。

@MDN

当一个元件被由用户激活活性CSS伪类匹配：所述。 它允许页面以得到激活已经被浏览器检测到的反馈。 当用鼠标交互，这是通常的用户按下鼠标按钮并释放它的时间。 的：有源伪类使用键盘tab键时，也典型地匹配。 它常用于和HTML元素，但可能不局限于只是那些。

 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 2:

我曾提出一个错误的相同，现在Mozilla已经修正了这个错误。 下面是错误ID https://bugzilla.mozilla.org/show_bug.cgi?id=1168055 。 他们提供了一个相同的补丁。

Answer 3:

我认为你正在寻找的焦点。 试试像下面。

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

DEMO

文章来源: Active Pseudo CSS class not working for textbox in Firefox