Question

我正在尝试在Firefox的文本框中使用Active Pseudo 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伪类匹配。它允许页面给出反馈，表明浏览器已检测到激活。与鼠标交互时，通常是用户按下鼠标按钮并释放它之间的时间。：使用键盘选项卡键时，通常也会匹配：active伪类。它经常用于和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类不适用于Firefox

3 个答案: