Active Pseudo CSS class not working for textbox in

问题:

I am trying to use Active Pseudo CSS class on text box in Firefox but seems like it is not working. Could any one suggest me a solution. below is the css code i am using :

hover is working fine. but on clicking on text box , active class should have been applied but it isnt.

.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;
}

回答1:

:active only applies while the mouse button is held down...it is removed when the mouse button is released.

In your case, the pseudo-class is working, just, I suspect, not in the way you were thinking.

@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">

回答2:

I had raised a bug for the same and mozilla has now fixed this bug. Here is the bug id https://bugzilla.mozilla.org/show_bug.cgi?id=1168055 . They have provided a patch for the same.

回答3:

I think you are looking for focus. Try it like below.

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

DEMO