How can I change the style of radio buttons, so that they look like cheboxes? Need cross-browser compatibility. Found on the Internet such code:

input[type="radio"]{ -webkit-appearance:checkbox; /*chrome,safari,opera*/ -moz-appearance:checkbox; /*firebox*/ -ms-appearance:checkbox; /*not currently supported*/ }

But does not work in IE and Opera.

Based on the foregoing

 (document).ready(function() { $("input[type=radio]:checked").parent("label").css(" background-position","0 -21px"); }); 
 div.boolean br{display:none;} div.boolean>label { display: inline-block; text-align: left; padding: 0; margin: 0 10px 0 0; } input[type="radio"] { visibility: hidden; } label:before{ display: inline-block; content: ""; width: 20px; height: 20px; border: 1px solid grey; margin-right: 10px; cursor: pointer; border-radius: 4px; background: url('http://www.dis-ag.com/SiteCollectionDocuments/images/checkbox-sprite.png'); background-size: 100%; } 
 <div class="fields boolean"> <label><input type="radio" value="1" name="UF_PRICE_LIST">да</label><br> <label><input type="radio" value="0" name="UF_PRICE_LIST" checked="">нет</label> </div>
I say, html code can not be changed.

  • Why do you deceive the user and give radio buttons for checkboxes? - Kromster
  • It would be strange if it worked in IE, given the comment `/ * not currently supported * /`. You still have to do checkboxes and hang handlers with JS on them so that the behavior is similar to radio buttons. - Fenex
  • It will not work that way, since I work in Bitrix, and there are radio buttons - as registration fields ... - NNN
  • there you can certainly specify the type of switches that you need to use - Grundy
  • only radio buttons. - NNN

1 answer 1

For example, through pseudo-elements + background image:

 input[type="radio"] + label { display: inline-block; text-align: right; padding: 0; margin: 0 10px 0 0; } input[type="radio"] { visibility: hidden; } input[type="radio"] + label:after { display: inline-block; content: ""; width: 20px; height: 20px; border: 1px solid grey; margin-left: 10px; cursor: pointer; border-radius: 4px; background: url('http://www.dis-ag.com/SiteCollectionDocuments/images/checkbox-sprite.png'); background-size: 100%; } input[type="radio"]:checked + label:after { background-position: 0 -21px; } 
 <input type="radio" id="ie" name="browser" value="ie"> <label for="ie">Internet Explorer</label> <input type="radio" id="opera" name="browser" value="opera"> <label for="opera">Opera</label> <input type="radio" id="firefox" name="browser" value="firefox"> <label for="firefox">Firefox</label>

UPD

 $(function(){ $("input[type=radio]:checked").parent("label").addClass('active'); $("input[type=radio]").on('change', function(e){ $(this).closest('.fields').find('label').removeClass('active'); $(this).closest('label').addClass('active'); }); }); 
 div.boolean br{ display:none; } div.boolean > label { display: inline-block; text-align: left; padding: 0; margin: 0 10px 0 0; } input[type="radio"] { visibility: hidden; } label:before{ display: inline-block; content: ""; width: 20px; height: 20px; border: 1px solid grey; margin-right: 10px; cursor: pointer; border-radius: 4px; background: url('http://www.dis-ag.com/SiteCollectionDocuments/images/checkbox-sprite.png'); /* скопировать себе на сервер */ background-size: 100%; } label.active:before { background-position: 0 -21px; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="fields boolean"> <label><input type="radio" value="1" name="UF_PRICE_LIST">да</label><br> <label><input type="radio" value="0" name="UF_PRICE_LIST" checked="">нет</label> </div>

  • Thank you, but this is not that ... - NNN
  • html cannot be changed html cannot be changed <div class = "fields boolean"> <label> <input type = "radio" value = "1" name = "UF_PRICE_LIST"> yes </ label> <br> <label> <input type = "radio" value = "0" name = "UF_PRICE_LIST" checked = ""> no </ label> </ div> - NNN
  • div.boolean br {display: none;} div.boolean> label {display: inline-block; text-align: left; padding: 0; margin: 0 10px 0 0; } input [type = "radio"] {visibility: hidden; } label: before {display: inline-block; content: ""; width: 20px; height: 20px; border: 1px solid gray; margin-right: 10px; cursor: pointer; border-radius: 4px; background: url (' dis-ag.com/SiteCollectionDocuments/images/ ... ); background-size: 100%; } - NNN
  • @RRR Then you only js to help - korytoff
  • $ (document) .ready (function () {if ($ ("input [type = radio]"). attr ("checked") == 'checked') {$ ("input [type = radio]"). parent ("label"). css ("background-position", "0 -21px");}}); but it is impossible ... - NNN