活动的伪 CSS 类不适用于 Firefox 中的文本框答案

【问题标题】：Active Pseudo CSS class not working for textbox in Firefox活动的伪 CSS 类不适用于 Firefox 中的文本框
【发布时间】：2015-08-06 15:24:01
【问题描述】：

我正在尝试在 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;
}

【问题讨论】：

你试过:focus吗？？

标签： css firefox css-selectors

【解决方案1】：

我认为您正在寻找焦点。尝试如下。

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

DEMO

【讨论】：

嗨，suresh，我有一个已经尝试过的焦点类，即使我使用键盘上的 Tab 按钮将焦点从一个控件更改为我的文本框，应用焦点伪类也会更改文本框，但是我不希望这种情况发生。这就是为什么我要避免专注。此外，问题是为什么 :active 类不能在 fiifox 中用于文本框控制。

【解决方案2】：

:active 仅适用于按住鼠标按钮...释放鼠标按钮时会移除。

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

@MDN

:active CSS 伪类在用户激活元素时匹配。它允许页面给出浏览器检测到激活的反馈。与鼠标交互时，这通常是用户按下鼠标按钮和释放鼠标按钮之间的时间。 :active 伪类也通常在使用键盘 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;
}

&lt;input type="textarea" class="txtLogin"&gt;

【讨论】：

您好 Paulie，您提供的代码 sn-p 在我的 Firefox (38.0.1) 版本中无法用于活动伪类
那么，您遇到的是 FF 问题而不是 CSS 问题。这在 FF37 中很好（在 Chrome 中也可以），但似乎 FF38 很糟糕。也许您可以提交错误报告。

【解决方案3】：

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

【讨论】：