SASS - keep button color when clicked (focus, active)

Question

just a styling question for my Rails application.

I made some radio buttons to look like normal buttons. When a button is clicked (and the radio button is checked), I want to keep the button background-color the same as the hover color, but somehow it isn't working. Unfortunately, I'm not the biggest CSS expert. The color red is just for testing purposes.

HTML:

<label class="btn custom-btn good-outline">
  <%= f.radio_button :reception_feed, 2 %>
  <%= image_tag "smiley_2.svg", size: '48x48' %>
</label>

CSS (first try):

.good-outline {
    border-color: #00e676;
    color: #00e676;
    &:hover {
        background-color: #00e676;
        color: white;
    }    
    input[type=radio]:checked + label {
        background-color: red;
    }
  }

CSS (second try):

.good-outline {
    border-color: #00e676;
    color: #00e676;
    &:hover {
        background-color: #00e676;
        color: white;
    }    
    &:active, &:focus {
        background-color: red;
    }
  }

If I assign the states in my browser, it's working. But it's not working with the click events.

Thanks in advance!

`input[type=radio]:checked + label` is the way to go, but it targets the next sibling of your input if it is a label... and it's not what you have in your markup. Are we allowed to change your html markup ? — Amaury Hanser, Jun 10 '20 at 07:25
You would need a parent selector for your current html markup to work and unfortunately, that doesn't exist (yet). Check out this thread for possible solutions: https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector#1014958 — Gh05d, Jun 10 '20 at 08:10

score 1 · Accepted Answer · answered Jun 10 '20 at 14:01

You can do it by changing your markup a little bit.
As I'm not familiar with Rails, I'll use basic HTML in my snippet.

First, why your first try fails.

Your HTML markup:

<label class="btn custom-btn good-outline">
  <%= f.radio_button :reception_feed, 2 %>
  <%= image_tag "smiley_2.svg", size: '48x48' %>
</label>

Your CSS:

.good-outline { // targets all elements with the class .good-outline (so your label)
    border-color: #00e676;
    color: #00e676;
    &:hover { // targets .good-outline on hover (so your label:hover)
        background-color: #00e676;
        color: white;
    }    
    input[type=radio]:checked + label { 
    // targets a label, next direct sibling to an input radio, all children of a .good-outline
    // in your markup, it doesn't target anything
        background-color: red;
    }
  }

In short input[type=radio]:checked + label won't target anything in your markup.

Now, let's change the markup:

<input type="radio" id="choice-first" name="radio-choice">
<label for="choice-first">This is my first choice</label>
<input type="radio" id="choice-second" name="radio-choice">
<label for="choice-second">This is my second choice</label>

See how the label is the next direct sibling to it's corresponding input ?
Thanks to that, you can almost keep your css (I've used plain css to be able to add the snippet):

label {
  border-color: #00e676;
  color: #00e676;
}
label:hover {
  background-color: #00e676;
  color: white;
}
input[type=radio]:checked + label {
  background-color: red;
}

<input type="radio" id="choice-first" name="radio-choice">
<label for="choice-first">This is my first choice</label>
<input type="radio" id="choice-second" name="radio-choice">
<label for="choice-second">This is my second choice</label>

Now it's just a matter of styling to make it look like you want.
You could hide the input and keep just the label, you could add an image in the label and so on...

SASS - keep button color when clicked (focus, active)

1 Answers1