3

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

Takit Isy
  • 9,688
  • 3
  • 23
  • 47
Victoria Maria
  • 31
  • 1
  • 1
  • 5
  • 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 Aug 14 '18 at 11:46
  • 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") – Takit Isy Aug 14 '18 at 11:52
  • By "default" mode I mean the one that is checked when loading the page :-) – Victoria Maria Aug 14 '18 at 12:08
  • 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) – Takit Isy Aug 14 '18 at 12:25

2 Answers2

3

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.

halfer
  • 19,824
  • 17
  • 99
  • 186
Takit Isy
  • 9,688
  • 3
  • 23
  • 47
  • Thank you very much Takit Isy, I'll take a look at it :-) – Victoria Maria Aug 14 '18 at 12:11
  • @VictoriaMaria I've changed the styling for the "default" and "checked" after your answer to my comment. ;) – Takit Isy Aug 14 '18 at 12:17
  • 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? :-) – Victoria Maria Aug 14 '18 at 12:29
  • @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 ! – Takit Isy Aug 14 '18 at 12:35
  • 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. :-) – Victoria Maria Aug 14 '18 at 12:40
  • @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 ? – Takit Isy Aug 14 '18 at 12:44
  • 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. – Victoria Maria Aug 14 '18 at 12:49
  • It could be possible using another class or a property. Let me try to update my snippet that way. – Takit Isy Aug 14 '18 at 12:50
  • @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.) – Takit Isy Aug 14 '18 at 13:04
0

You can use this simple trick. When user can click or check the radio button

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

Hope this help.

Let me know further clarification. 

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



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


}
.Animals{
  margin: 0 auto;
}

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


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


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


.Animals .input
{
    padding-bottom:0;
}
.Animals label span
{
    position:relative;
    top:33%;
}

.Animals input[type=radio]:checked + label{
      border-color: #00AD51;
    color: #00AD51;
    background-color: #fff;
}
<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>
jaydeep patel
  • 867
  • 4
  • 14
  • 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 :-) – Victoria Maria Aug 14 '18 at 11:33
  • Okay if you target only on checked then use this class: `.Animals input[type=radio]:checked + label` – jaydeep patel Aug 14 '18 at 11:43