CODEWITHSUNDEEP
javascripthtmljquerycss
Asif Hussain
Asif Hussain

Reputation: 79

Change Radio Button Set Styles to Different Colors

I have below html for a quiz and it requires that each of the radio option should display different color like red, green, blue when clicked and for default conditions all will be white background and if the click is second time using a true false condition it would become white or unselected. I have tried using radio buttons styled as normal buttons. Would it be better to use checkboxes?

please guide so that I complete it . Would I need to use JS for each set or jquery is easy to use.

<html>

<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>
body {
    font-family:sans-serif;
}

#radioset {
    margin:4px;
   
    float:center;
    
  
}

#radioset label {
    float:left;
    width:170px;
    margin:4px;
    background-color:#EFEFEF;
    border-radius:4px;
    border:1px solid #D0D0D0;
    overflow:auto;
    width:100%
       
}

#radioset label span {
    text-align:center;
    font-size: 32px;
    padding:13px 0px;
    display:block;
    
}

#radioset label input {
    position:absolute;
    top:-20px;
    visibility: hidden;
}

#radioset input:checked + span {
    background-color:red;
    color:#F7F7F7;
}

.button {
  /*background-color: #4CAF50;  Green */
  border: 2px solid black;
  /*color: white;*/
  padding: 16px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 5vw;
  margin: 4px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
  width: 100%;
}

.div1 {
  width: 95vw;
  
  border-radius: 20px;
  background-color: #ddd;
  padding: 10px;
  margin:0 auto;
  overflow:hidden;
}


.card {
  /* Add shadows to create the "card" effect */
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.9);
  transition: 0.3s;
}

/* On mouse-over, add a deeper shadow */
.card:hover {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.9);
}



input{
width: 100%;
height: 50px;
font-size: 5vw;
}


h1 {
    font-size:6vw;
}

</style>
</head>

<body>

<!-- QUESTIONS-- -->
<div class="div1 card">
<h1>Question 1 ?</h1>

<div id="radioset">

    <label><input type="radio" name="toggle"><span>YES</span></label><br>
    <label><input type="radio" name="toggle"><span>NO</span></label><br>
    <label><input type="radio" name="toggle"><span>N/A</span></label><br>
    
</div>
</div>


<br>
<div class="div1 card">
<h1>Question 2 ?</h1>

<div id="radioset">

    <label ><input type="radio" name="toggle2"><span>YES</span></label><br>
    <label ><input type="radio" name="toggle2"><span>NO</span></label><br>
    <label><input type="radio" name="toggle2"><span>N/A</span></label><br>
    
</div>
</div>

<br>
<div class="div1 card">
<h1>Question 3 ?</h1>

<div id="radioset">

    <label ><input type="radio" name="toggle3"><span>YES</span></label><br>
    <label ><input type="radio" name="toggle3"><span>NO</span></label><br>
    <label><input type="radio" name="toggle3"><span>N/A</span></label><br>
    
</div>
</div>


<p>___________________________________________________________________________________</p>

</body>
</html>

https://jsfiddle.net/mrgyk3zs/

Thanks.

Upvotes: 0

Views: 411

Answers (1)

Reporter
Reporter

Reputation: 3948

Based on your comments uderneath your question and provided example here my suggenstion: Changes on your html:

<div id="radioset">

    <label><input type="checkbox" name="toggle"><span class="yes">YES</span></label><br>
    <label><input type="checkbox" name="toggle"><span class="no">NO</span></label><br>
    <label><input type="checkbox" name="toggle"><span class="nut">N/A</span></label><br>
    
</div>

and the blocks with questions. Add a unique css class to each span element. Also change the type from 'radio' to 'checkbox' because you cannot unselect a radio field, without javascript.

Duplicate your css class

#radioset input:checked + span {
    background-color:red;
    color:#F7F7F7;
}

three times and add an the additional css class to selector:

#radioset input:checked + span.yes {
    background-color:red;
    color:#F7F7F7;
}

#radioset input:checked + span.no {
    background-color:blue;
    color:#F7F7F7;
}
#radioset input:checked + span.nut {
    background-color:green;
    color:#F7F7F7;
}

Important note: If you want to prevent to select only one, you have to use javascript for it.

If you want to use type radio instead have a look at check/uncheck radio input with javascript hot two uncheck it with plain javascript.

Upvotes: 1

Related Questions