0

Как мне поменять стиль радиокнопок, что бы они выглядели как чебоксы? Нужна кроссбраузерность. Нашла в интернете такой код:

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

Но не работает в IE и опере.

На основании нишеизложенного

(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>
Говорю, html код нельзя менять.

6
  • Для чего вам обманывать пользователя и выдавать радиокнопки за чекбоксы?
    – Kromster
    17 ноя 2015 в 19:57
  • Было бы странно, если бы в IE заработало, учитывая комментарий ` /*not currently supported*/`. Придётся вам всё-таки делать чекбоксы и навешивать JS'ом на них обработчики чтобы поведение было аналогично радиокнопкам.
    – Fenex
    17 ноя 2015 в 21:03
  • Так не получится, так как я работаю в Битриксе, а там есть радиокнопки - в качестве полей к регистрации...
    – NNN
    18 ноя 2015 в 5:46
  • там наверняка можно указать тип переключателей, какие нужно использовать
    – Grundy
    18 ноя 2015 в 7:37
  • только радиокнопки.
    – NNN
    18 ноя 2015 в 9:04

1 ответ 1

1

Например через псевдоэлементы + фоновую картинку:

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>

12
  • СПасибо, но это не то...
    – NNN
    24 ноя 2015 в 7:04
  • html нельзя изменять html нельзя изменять <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>
    – NNN
    24 ноя 2015 в 7:10
  • 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('dis-ag.com/SiteCollectionDocuments/images/…); background-size: 100%; }
    – NNN
    24 ноя 2015 в 7:15
  • @RRR Тогда вам только js в помощь
    – korytoff
    24 ноя 2015 в 7:18
  • $( document ).ready(function() { if($("input[type=radio]").attr("checked") == 'checked') { $("input[type=radio]").parent("label").css(" background-position","0 -21px"); } }); но не получается...
    – NNN
    24 ноя 2015 в 8:01

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.