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


I have the following HMTL:

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

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?


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.

I see.

I actually posted the wrong code!

I meant to post the buttons:




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

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" );

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

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.