Keeping style fixed to input until changed

Question

I have this code at the moment (following on from earliers question):

input[type=submit]:focus {
  background-color: yellow;
  outline: none;
}

The problem however, is when I click anywhere else on the screen, the background colour reverts to normal. How can I get it to stay and only change if I click another button? also a further question, how can I get one particular one to default to a colour when the page loads? at the moment all the colours are black background until you click one, that turns it yellow and then clicking anywhere else on the page, turns that one back to black

pure JS solutions only please

Answer 1

If you want to change the background until it's changed again by another button, use JS to change the input background instead of just changing on focus. Either add an event listener or do it right from the HTML like:

<input type="submit" onclick="this.style.background='yellow';" />

Then do something similar for your other elements that you want to change the colors for. That way the color change will stay until another button changes it.