# CSS to have different colours for each option of MCQ

**URL:** https://community.surveysparrow.com/t/css-to-have-different-colours-for-each-option-of-mcq/3241
**Category:** CSS Knowledge Bonanza! 🕺
**Created:** [April 17, 2023, 8:41am UTC](https://community.surveysparrow.com/t/css-to-have-different-colours-for-each-option-of-mcq/3241 "2023-04-17T08:41:19Z")
**Posts on this page:** 1
**Page:** 1

<div class="post-metadata">

### Author: ![Venkata\_Abhijith](https://avatars.discourse-cdn.com/v4/letter/v/cab0a1/32.png) [@Venkata\_Abhijith](https://community.surveysparrow.com/u/Venkata_Abhijith)
#### Post date: [April 17, 2023, 8:41am UTC](https://community.surveysparrow.com/t/css-to-have-different-colours-for-each-option-of-mcq/3241/1 "2023-04-17T08:41:20Z")

</div>

CSS to have different colours for each option of MCQ:

.ss\_multiple\_choice .ss-answer-option--bg.ss-answer-option--choice:nth-of-type(1){  
background: rgba(255,0,0,0.5);  
color:white;  
border-color: rgba(255,0,0,0.5);  
}

.ss\_multiple\_choice .ss-answer-option--bg.ss-answer-option--choice:nth-of-type(1).active{  
background: rgba(255,0,0,1);  
color:white;  
border-color: rgba(255,0,0,1);  
}

.ss\_multiple\_choice .ss-answer-option--bg.ss-answer-option--choice:nth-of-type(2){  
background: rgba(0,100,125,0.5);  
color:white;  
border-color: rgba(0,100,125,0.5);  
}

.ss\_multiple\_choice .ss-answer-option--bg.ss-answer-option--choice:nth-of-type(2).active{  
background: rgba(0,100,125,1);  
color:white;  
border-color: rgba(0,100,125,1);  
}

.ss\_multiple\_choice .ss-answer-option--bg.ss-answer-option--choice:nth-of-type(3){  
background: rgba(0,0,245,0.5);  
color:white;  
border-color: rgba(0,0,245,0.5);  
}

.ss\_multiple\_choice .ss-answer-option--bg.ss-answer-option--choice:nth-of-type(3).active{  
background: rgba(0,0,245,1);  
color:white;  
border-color: rgba(0,0,245,1);  
}

 ![Screenshot 2023-04-17 at 2.10.48 PM](https://europe1.discourse-cdn.com/flex013/uploads/surveysparrow1/original/1X/746e7a867c4af94aa866f9a3d353a7af0bd368ec.png)  
 ![Screenshot 2023-04-17 at 2.10.55 PM](https://europe1.discourse-cdn.com/flex013/uploads/surveysparrow1/original/1X/8b6afabe5e49857d93688b95234a410430ef119c.png)