CSS

Question

I am trying to style individual radio buttons so that each selection comes out as a different color. However, my code only allows a minimum of two buttons of the same color before the addition of a third. Is there any work around? Here is the non-working code.

<html>
<style>
            label {  
                display: inline-block;  
                cursor: pointer;  
                position: relative;  
                padding-left: 25px;  
                margin-right: 15px;  
                font-size: 13px;  
                }

            input[type=radio] {  
                display: none;  
                }  

            label:before {  
                content: "";  
                display: inline-block;  
                width: 20px;  
                height: 19px;  
                margin-right: 15px;  
                position: absolute;  
                left: 0;  
                bottombottom: 1px;  
                background-color: #FFFFFF;  
                box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);  
                }  

            label:before {  
                border-radius: 8px;  
                }

            .radio1 input[type=radio]:checked + label:before {  
                content: "\2022";  
                color: #73abfb;  
                font-size: 55px;  
                text-align: center;  
                line-height: 22px;
                }

            .radio2 input[type=radio]:checked + label:before {  
                content: "\2022";  
                color: #f8982d;  
                font-size: 55px;  
                text-align: center;  
                line-height: 22px;
                }

            .radio3 input[type=radio]:checked + label:before {  
                content: "\2022";  
                color: #9cc537;   
                font-size: 55px;  
                text-align: center;  
                line-height: 22px;
                }
</style>

<div class="radio1">  
            <input id="w" type="radio" name="INTAKE" value="w">  
                <label for="w"></label></div>

<div class="radio2">  
            <input id="p" type="radio" name="INTAKE" value="P">     
                <label for="p"></label></div>

<div class="radio3">
            <input id="c" type="radio" name="INTAKE" value="C"> 
                <label for="c"></label></div>

</html>

Alex Char · Accepted Answer

You can set color in radio with class .radio3 like following:

label {
  display: inline-block;
  cursor: pointer;
  position: relative;
  padding-left: 25px;
  margin-right: 15px;
  font-size: 13px;
}
input[type=radio] {
  display: none;
}
label:before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 19px;
  margin-right: 15px;
  position: absolute;
  left: 0;
  bottom: 1px;
  background-color: #FFFFFF;
  box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);
}
label:before {
  border-radius: 8px;
}
.radio1 input[type=radio]:checked + label:before {
  content: "\2022";
  color: #73abfb;
  font-size: 55px;
  text-align: center;
  line-height: 22px;
}
.radio2 input[type=radio]:checked + label:before {
  content: "\2022";
  color: #f8982d;
  font-size: 55px;
  text-align: center;
  line-height: 22px;
}
.radio3 input[type=radio]:checked + label:before {
  content: "\2022";
  color: red;/*here change color*/
  font-size: 55px;
  text-align: center;
  line-height: 22px;
}

<div class="radio1">
  <input id="w" type="radio" name="INTAKE" value="w">
  <label for="w"></label>
</div>
<div class="radio2">
  <input id="p" type="radio" name="INTAKE" value="P">
  <label for="p"></label>
</div>
<div class="radio3">
  <input id="c" type="radio" name="INTAKE" value="C">
  <label for="c"></label>
</div>

Also you have to read css. I assume you take copy-paste this code from internet.

CSS - Styling individual radio buttons

Tags:

html

dan5ermou5

1 Answers

Alex Char

Recent Activity

Donate For Us