All geek questions in one place

How to configure switch in html

I am trying to get a radio button like this.

enter image description here

But I get like this

enter image description here

If the No option is selected, I need to configure the switch, and it should display a white color inside it. If a switch is selected, it should show a green color inside the box. How to achieve this?

Here is what I have tried.

index.html

<!doctype html> <html> <head> <meta charset="utf-8"> <style> /* Radio Button CSS*/ label { display: inline; } .radio-1 { width: 193px; } .button-holder { float: left; margin-left: 6px; margin-top: 16px; } .regular-radio { display: none; } .regular-radio + label { background-color: #fafafa; border: 2px solid #cacece; border-radius: 50px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 -15px 10px -12px rgba(0, 0, 0, 0.05) inset; display: inline-block; padding: 11px; position: relative; } .regular-radio:checked + label:after { background: none repeat scroll 0 0 #94E325; border-radius: 50px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.3) inset; content: " "; font-size: 36px; height: 8px; left: 7px; position: absolute; top: 7px; width: 8px; } .regular-radio:checked + label { background-color: #e9ecee; border: 2px solid #adb8c0; color: #99a1a7; padding: 11px; } .regular-radio + label:active, .regular-radio:checked + label:active { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.1) inset; } </style> </head> <body> <div class="button-holder"> <input type="radio" checked="" class="regular-radio" name="radio-1-set" id="radio-1-set"><label for="radio-1-set"></label><br> <input type="radio" checked="" class="regular-radio" name="radio-1-set" id="radio-2-set"><label for="radio-2-set"></label><br> </div> </body> </html>
+5
source share
4 answers

Just add the :before pseudo-element to take care of the color before the radio button is radio . You can add this to your CSS :

  .regular-radio + label:before { background: none repeat scroll 0 0 #FDFDFD; border-radius: 50px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.3) inset; content: " "; font-size: 36px; height: 8px; left: 7px; position: absolute; top: 7px; width: 8px; }

Working demonstration . You can, of course, change the background this shortcut to exactly match the example you are showing. Hope this helps.

+5
source 
 input[type=radio].css-checkbox { position: absolute; z-index: -1000; left: -1000px; overflow: hidden; clip: rect(0 0 0 0); height: 1px; width: 1px; margin: -1px; padding: 0; border: 0; } input[type=radio].css-checkbox + label.css-label { padding-left: 30px; height: 25px; display: inline-block; line-height: 25px; background-repeat: no-repeat; background-position: 0 0; font-size: 25px; vertical-align: middle; cursor: pointer; } input[type=radio].css-checkbox:checked + label.css-label { background-position: 0 -25px; } label.css-label { background-image: url(http://csscheckbox.com/checkboxes/u/csscheckbox_98809849d4d88f570f5ad4ce6c2be5b1.png); -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

check out this fiddle.

+2
source

Format your switch and uncheck and check.

You can find your following block code:

 <!doctype html> <html> <head> <meta charset="utf-8"> <style> /* Radio Button CSS*/ label { display: inline; } .radio-1 { width: 193px; } .button-holder { float: left; margin-left: 6px; margin-top: 16px; } .regular-radio { display: none; } .regular-radio + label { background-color: #fafafa; border: 2px solid #cacece; border-radius: 50px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 -15px 10px -12px rgba(0, 0, 0, 0.05) inset; display: inline-block; padding: 11px; position: relative; } .regular-radio:checked + label:after { background: none repeat scroll 0 0 #94E325; border-radius: 50px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.3) inset; content: " "; font-size: 36px; height: 8px; left: 7px; position: absolute; top: 7px; width: 8px; } .regular-radio:checked + label { background-color: #e9ecee; border: 2px solid #adb8c0; color: #99a1a7; padding: 11px; } .regular-radio + label:active, .regular-radio:checked + label:active { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.1) inset; } /*----------------hungtq added--------------*/ .regular-radio + label:before { background: none repeat scroll 0 0 #e9ecee; border-radius: 50px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.3) inset; content: " "; font-size: 36px; height: 8px; left: 7px; position: absolute; top: 7px; width: 8px; } </style> </head> <body> <div class="button-holder"> <input type="radio" checked="" class="regular-radio" name="radio-1-set" id="radio-1-set"><label for="radio-1-set"></label><br> <input type="radio" checked="" class="regular-radio" name="radio-1-set" id="radio-2-set"><label for="radio-2-set"></label><br> </div> </body> </html>

Result: enter image description here

+2
source

You can achieve your desired location in two ways.

  • Changing the default look with CSS appearance and applying the look. Unfortunately, this does not work in IE for Desktop (but it works in IE for Windows Phone). Demo video:

     input[type="radio"] { /* remove standard background appearance */ -webkit-appearance: none; -moz-appearance: none; appearance: none; /* create custom radiobutton appearance */ display: inline-block; width: 25px; height: 25px; padding: 6px; /* background-color only for content */ background-clip: content-box; border: 2px solid #bbb; background-color: #e7e6e7; border-radius: 50%; } /* appearance for checked radiobutton */ input[type="radio"]:checked { background-color: #93e026; } /* optional styles, I'm using this for centering radiobuttons */ .flex { display: flex; align-items: center; } 
     <div class="flex"> <input type="radio" name="radio" id="radio1" /> <label for="radio1">RadioButton1</label> </div> <div class="flex"> <input type="radio" name="radio" id="radio2" /> <label for="radio2">RadioButton2</label> </div> <div class="flex"> <input type="radio" name="radio" id="radio3" /> <label for="radio3">RadioButton3</label> </div>

  • Hide the radio object and adjust the appearance of the radio object to the label pseudo-detector. By the way, there is no need for absolute positioning. Demo:

     *, *:before, *:after { box-sizing: border-box; } input[type="radio"] { display: none; } input[type="radio"] + label:before { content: ""; /* create custom radiobutton appearance */ display: inline-block; width: 25px; height: 25px; padding: 6px; margin-right: 3px; /* background-color only for content */ background-clip: content-box; border: 2px solid #bbb; background-color: #e7e6e7; border-radius: 50%; } /* appearance for checked radiobutton */ input[type="radio"]:checked + label:before { background-color: #93e026; } /* optional styles, I'm using this for centering radiobuttons */ label { display: flex; align-items: center; } 
     <input type="radio" name="radio" id="radio1" /> <label for="radio1">RadioButton1</label> <input type="radio" name="radio" id="radio2" /> <label for="radio2">RadioButton2</label> <input type="radio" name="radio" id="radio3" /> <label for="radio3">RadioButton3</label>
0
source

Source: https://habr.com/ru/post/1204297/

More articles:


All Articles