110
Views
2
Comments
Solved
css style for radio button
Question

I need a different colour for radio button when selected.

Please see the below screenshot: Its my requirement

Present, I m getting like

here I need to show white color between grey border and green dot inside. But I m able to apply two colors only.

PFB the css I m using

.radio-button:checked:before {  

  background-color: #057988 !important;    

border: 6px solid #D8D8D9 !important; 

   border-radius: 16px;

}

2018-10-29 08-31-03
João Marques
 
MVP
Solution

Hi Mahitha,


For that, you can use the CSS outline property to add another border, an outer border.

Take a look at a commented CSS snippet that you can use to your example to set the three colours (inside selected circle, inner border, outer border), and how it affects the radio button:


Kind Regards,
João

UserImage.jpg
Mahitha Ganji

Hi João Marques,

Thats really working, Thanks a lot.

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.