6

Any reason why when I run this code,

input[type=submit]:active {
  background-color: green;
}

when I click the desired button it only flashes green for a split second and then returns to the original colour? How can I keep it permanently green?

Michał Szajbe
  • 8,830
  • 3
  • 33
  • 39
The worm
  • 5,580
  • 14
  • 36
  • 49

2 Answers2

6
input[type=submit]:focus {
    background-color: green;
}

try this

Alan Mroczek
  • 1,099
  • 1
  • 11
  • 27
  • glad to help :) – Alan Mroczek Oct 12 '16 at 09:27
  • but notice that when user focus out (eg. click outside) focus selector will be gone and default color will be back. If you want that permament you should create class for background-color and add it onclick with js. You can add attr to input `onclick="this.style.backgroundColor = '#000'"` if you not familiar with js – Alan Mroczek Oct 12 '16 at 09:36
  • can you explain that a bit more as that is my next question..I am using reactjs with this – The worm Oct 12 '16 at 10:15
  • `` it should be fine with react, because it is pure js solution – Alan Mroczek Oct 12 '16 at 10:20
  • there not a better way? I already have a method called on the onClick function – The worm Oct 12 '16 at 10:21
  • `yourMethod(event) { event.currentTarget.style.backgroundColor = '#ccc'; }` and in your render method `` I hope it helps – Alan Mroczek Oct 12 '16 at 10:29
1

You also need to use the :focus selector.

This then adds the background color to the input as it is the focused element.

input[type=submit]:active, input[type=submit]:focus {
  background-color: green;
}
<input type="submit" />
miken32
  • 42,008
  • 16
  • 111
  • 154
Stewartside
  • 20,378
  • 12
  • 60
  • 81
  • It should be pointed out that `:focus` is not **permanent**. It only lasts until something else is clicked on. – Paulie_D Oct 12 '16 at 09:26
  • @Paulie_D I would hope the explanation that it adds it to the *focused* element would be understandable – Stewartside Oct 12 '16 at 09:29