Change color on radio button (default and checked)

Question

I have a question:

I want my radio button at default-mode to have the css:

border-color: #00AD51;
color: #fff;
background-color: #00AD51;

and when the user selects/clicks on another radio button it changes to this css:

border-color: #00AD51;
color: #00AD51;
background-color: #fff;

Is this possible? How can I make specific css on default-mode and checked-mode on radio buttons?

HTML:

<p><b>What is your favorite animal?</b></p><br />

<div class="Animals"><div class="input">
    <input id="dog" type="radio" name="Animal" checked>
        <label for="dog"><span>Dog</span></label>
</div>

<div class="Animals"><div class="input">
    <input id="cat" type="radio" name="Animal">
        <label for="cat"><span>Cat</span></label>
</div>

<div class="Animals"><div class="input">
    <input id="Horse" type="radio" name="Animal">
        <label for="Horse"><span>Horse</span></label>
</div>

<div class="Animals"><div class="input">
    <input id="Cow" type="radio" name="Animal">
        <label for="Cow"><span>Cow</span></label>
</div>

Link to codepen: https://codepen.io/vicm/pen/QBPQWZ

Solution

Here is a snippet where I:

• Added the closing </div> in your HTML,
• Reorganized your CSS code and tried to remove duplicate styled properties,
• Corrected some typo errors (display: inline-blok to display: inline-block, position:relavitve; to position: relative; …),
• I added some styling plus comments to make things clear about the different possible states,
• Instead of using checked on the "recommended" answer, you can use another custom property, like "recommend", and use it in your CSS to stylize it correctly.

input[type=radio] {
  margin-right: 3px;
  position: relative;
  top: 3px;
}

.Animals {
  display: inline-block;
  height: 100px;
  margin: 10px;
  border: 2px solid #003D6A;
  border-radius: 3px;
  background-color: #fff;
  padding: 10px;
  text-align: center;
  line-height: 20px;
  font-family: Helvetica;
  font-size: 20px;
}

.Animals .input {
  padding-bottom: 0;
}

.Animals input[type=radio] {
  opacity: 0;
}

.Animals input[type=radio]+label {
  cursor: pointer;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0);
  border: 2px solid;
  margin: 10px;
  height: 100px;
  border-radius: 3px;
  text-align: center;
  font-size: 20px;
  font-family: Helvetica;
  width: 292px;
/* Default */
  border-color: darkblue;
  background-color: #fff;
  color: darkblue;
}

/* Recommanded */
.Animals input[type=radio][recommand]+label {
  border-color: turquoise;
  color: turquoise;
}

/* Hover */
.Animals input[type=radio]+label:hover {
  border-color: #00AD51;
  color: #00AD51;
}

/* Checked */
.Animals input[type=radio]:checked+label {
  border-color: #00AD51;
  background-color: #00AD51;
  color: #fff;
}

.Animals label span {
  position: relative;
  top: 33%;
}

<p><b>What is your favorite animal?</b></p><br />

<div class="Animals">
  <div class="input">
    <input id="dog" type="radio" name="Animal" recommand>
    <label for="dog"><span>Dog</span></label>
  </div>
</div>

<div class="Animals">
  <div class="input">
    <input id="cat" type="radio" name="Animal">
    <label for="cat"><span>Cat</span></label>
  </div>
</div>

<div class="Animals">
  <div class="input">
    <input id="Horse" type="radio" name="Animal">
    <label for="Horse"><span>Horse</span></label>
  </div>
</div>

<div class="Animals">
  <div class="input">
    <input id="Cow" type="radio" name="Animal">
    <label for="Cow"><span>Cow</span></label>
  </div>
</div>

If you wish to modify something, it should be easier now.

Comments

[Takit Isy]

In your codepen, there are some style properties that are set multiple times. I don't know which one you want to keep. For example .Animals margin. You should reorganize your code and remove those.

[Takit Isy]

What do you mean by "default" mode ? Is that the normal state, not hovered, nor selected ; or the one that is checked when loading the page ? As we can have 3 different states, you should specify the styles for each case : "Normal", "Hovered", "Selected"… (And maybe even "Selected and Hovered")

[Victoria Maria]

By "default" mode I mean the one that is checked when loading the page :-)

[Takit Isy]

Victoria, as you shouldn't correct the code in your question using code from answers, I rolled back to the previous version. (This can cause answers to become not applicable, in some cases)

[Victoria Maria]

Unfortunately it didn't help. Now it is styled so the default-mode matches the checked-mode. I want to style default and checked-mode differently as described in my question. I really need help :-)

[jaydeep patel]

Okay if you target only on checked then use this class: .Animals input[type=radio]:checked + label

[Victoria Maria]

Thank you very much Takit Isy, I'll take a look at it :-)

[Takit Isy]

@VictoriaMaria I've changed the styling for the "default" and "checked" after your answer to my comment. ;)

[Victoria Maria]

Try and have a look at my codepen again, I've edited it after you and did some small changes but then again - I can't style the radio button ("Dog") differently for default-mode when loading the page and checked-mode for when user clicks on any radio button. When you open the copepen-page the radio button "Dog" is styled correctly, but is it possible to change this color, when you click on any other radio button? :-)

[Takit Isy]

@VictoriaMaria I'm trying to understand. Do you want your "Dog" button to be specifically of another color when not "selected" ? Note that, usually "default" stands for not selected, nor hovered !

[Victoria Maria]

Sorry for the confusion. I only want to have a pre-selected radio button like "Dog" with a specific css-style. When a user then click on any other radio botton the "Dog" button should loose the specific css-style and should be styled like the other when the user is selecting/checking them. Is it understandable? The "Dog" radio button should only act like a recommendation for the user when the page has loaded, but if the user selects another radio button, the "Dog" radio button looses its function as a recommendation. Therefor the different css-styles on default-mode and checked-mode. :-)

[Takit Isy]

@VictoriaMaria The fact that it is checked by default isn't enough ? What will be the difference between "Dog" and the other buttons once you selected another one ?

[Victoria Maria]

No, not in this case. The difference would be that the user would know the difference of what the recommendation would be and what the user selects by itself. It should change the color as I have described in the question. But I am afraid it isn't possible to do so.

[Takit Isy]

It could be possible using another class or a property. Let me try to update my snippet that way.

[Takit Isy]

@VictoriaMaria I've updated ! I hope it will fulfill your needs. :) (Colors and styling may not be “as you wish”, but you can see the idea.)