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

score 1 · Answer 1 · answered Oct 12 '16 at 12:29

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.

answered Oct 12 '16 at 12:29

freginold

3,946
3
13
28

I thought this but I already have `onClick={this.getTodaysCommits}` tied here. I can't write to onClick twice can I? – The worm Oct 12 '16 at 12:31
You could do it by including them both in the same onclick event, like onclick='{this.getTodaysCommits};this.style.background='yellow';" – freginold Oct 12 '16 at 12:36
so how would that look? – The worm Oct 12 '16 at 12:37
just edited the comment to include a way to do it, from http://stackoverflow.com/questions/3910736/how-to-call-multiple-javascript-functions-in-onclick-event – freginold Oct 12 '16 at 12:38

score 0 · Answer 2 · answered Oct 12 '16 at 12:47

In your case, you have a css code, that changes the background of button when the button is focused. In order to make a default background of button, you should remove :focus selector.

input[type=submit] {
  background-color: blue; 
  /* All buttons will be blue after page loaded */
  outline: none;
}

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

In your case, you need to change the background-color property using JavaScript.

Here is the working example. We set an active class to that button, which was recently clicked and remove active class from other buttons. You can make this in another way, but the logic is like so.

var buttons = document.querySelectorAll('input[type="button"]');

var resetBackgrounds = function() {
  for (var i = 0; i <  buttons.length; ++i)
    buttons[i].className = '';
}

for (var i = 0; i <  buttons.length; ++i) {
  buttons[i].onclick = function() {
    resetBackgrounds();
    this.className = 'active';
  }
}

input[type="button"] {
  background-color: blue;
  outline: none;
  color: white;
}

input[type="button"].active {
  background-color: black; 
}

<input type="button" value="Button1" />
<input type="button" value="Button2" />
<input type="button" value="Button3" />
<input type="button" value="Button4" />

maioman · Answer 3 · 2016-10-13T12:35:25.470

Here's a solution in straight jquery:

$('input')
  .on('click',function(){
  $('input').css('background','')//reset color
  $(this).css('background','yellow')//set color
})

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='submit' />
<input type='submit' />
<input type='submit' />
<input type='submit' />

the equivalent in js vanilla:

var inputs = Array.from(document.querySelectorAll('input'))

inputs.forEach(x => x.addEventListener('click', handler))

function handler(e) {
  inputs.forEach(x => x.style.background = 'inherit')
  e.target.style.background = 'yellow'
}

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

<input type='submit' />
<input type='submit' />
<input type='submit' />
<input type='submit' />

Keeping style fixed to input until changed

3 Answers3