css - How to customize radio button in html -


I am trying to get radio button like this ..

 Enter image details here

but I'm getting this way

Enter image details here

If no option is selected, then I want to customize the radio button Is required and it should show white color inside it. If the radio button is selected, then the green color should be displayed inside the box.

index.html

  & lt ;; Doctype html & gt; How to get it?  

& lt; Html & gt; & Lt; Top & gt; & Lt; Meta charset = "UTF-8" & gt; & Lt; Style & gt; / * Radio button css * / label {display: inline; }. Radio-1 {Width: 193px; }. Button holder {float: left; Margin-left: 6px; Margin-top: 16px; }. Amit-Radio {Display: None; } .Audit-radio + label {background color: #fafafa; Border: 2px solid # cassette; Range radius: 50px; Box-shadow: 0 1 px 2 px rgba (0, 0, 0, 0.05), 0 -15 px 10 px-12px rgba (0, 0, 0, 0.05) inset; Display: Inline-block; Padding: 11px; Status: Relative; }. Amit-Radio: Check + Label: {After background: Any repeatable scrolls 0 0 # 94E325; Range radius: 50px; Box-Shadow: 0 0 10 px RGBA (0, 0, 0, 0.3) Inset; material: " "; Font-size: 36px; Height: 8px; Left: 7px; Status: Completed; Top: 7px; Width: 8px; }. Regular-radio: checked + label {background-color: # E9ECE; Border: 2px solid # adb8c0; Color: # 99A1A7; Padding: 11px; }. Regular-Radio + Label: Active,. Radio: Check + Label: Active {Box-Shadow: 0 1 Px 2 Px RGBA (0, 0, 0, 0.05), 0 1 Px 3 Px RGBA (0, 0, 0, 0.1) Inset; } & Lt; / Style & gt; & Lt; / Head & gt; & Lt; Body & gt; & Lt; Div class = "button-holder" & gt; & Lt; Input type = "radio" check = "" class = "regular-radio" name = "radio-1 set" id = "radio-1 set" & gt; & Lt; Label = "radio-1-set" & gt; & Lt; / Labels & gt; & Lt; Br> & Lt; Input type = "radio" check = "" class = "regular-radio" name = "radio-1 set" id = "radio-2-set" & gt; & Lt; Label = "radio-2-set" & gt; & Lt; / Labels & gt; & Lt; Br> & Lt; / Div & gt; & Lt; / Body & gt; & Lt; / Html & gt;

just add : first to keep the pseudo element in mind The color is checked before the radio button. You can add it to your CSS :

  .regular-radio + label: Before {background: none repeat scroll 0 0 #FDFDFD; Range radius: 50px; Box-Shadow: 0 0 10 px RGBA (0, 0, 0, 0.3) Inset; material: " "; Font-size: 36px; Height: 8px; Left: 7px; Status: Completed; Top: 7px; Width: 8px; }   

You can change the background of this label to match that instance exactly. Hope it helps.

Comments

Popular posts from this blog

php - PDO bindParam() fatal error -

logging - How can I log both the Request.InputStream and Response.OutputStream traffic in my ASP.NET MVC3 Application for specific Actions? -

java - Why my included JSP file won't get processed correctly? -