Keep background colour of button when clicked and then clicked off the page

[toolman]

Hi,

I have the following HMTL:

<select>
<option value="one">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
</select>

and the following CSS:

 .size-buttons button:focus,.size-buttons button:active,.size-buttons button:target{
    border: 1px solid #000;
    background: #829a84;
    color: #fff
  }

What I am trying to do is to have the button’s background remain the colour in the CSS when the user clicks on it and then clicks else where on the page - so it’s “selected”.

I’ve tried the above, which adds the background when clicked but disapears when the user clicks off the page.

Any ideas how I can achieve this?

Thanks

[rpkamp]

You can’t do this with just a button and CSS. You would need a checkbox, hide it, and use ::after to actually render what you would like rendered.

Or you would need a bit of Javascript that changed the color of the button when pressed.

[toolman]

I see.

I actually posted the wrong code!

I meant to post the buttons:

HTML

<button>One</button>
<button>Two</button>
<button>Three</button>

CSS

button {
   color: #000;
   border: 1px solid #000;
   background: #cccccc
}
.selected {
    color: white;
    background:#ff0000
}

I’ve tried this jQuery which works, but users can select all three if clicked. Is there a away to only allow one to be selected at a time?

$( "button" ).click(function() {
  $(this).toggleClass( "selected" );
});

[toolman]

I worked it out - I needed to add and remove a class with an onClick.