1

Подскажите, как можно стилизовать input[type="radio"] и input[type="checkbox"] (без разницы) таким образом, чтобы активный пункт при его выборе полностью обводился в рамку, т.е. вот так

.primer { display: inline-block; border: 1px solid black; }
<div class="primer">
<label class="product--items"><input type="radio" class="radio" name="" value="1" checked="checked">Пример</label>
</div>

Разметка такая, и меняться не должна:

<label class="product--items"><input type="radio" class="radio" name="" value="1" checked="checked">Один</label>
<label class="product--items"><input type="radio" class="radio" name="" value="1">Два</label>
<label class="product--items"><input type="radio" class="radio" name="" value="1">Три</label>

т.е. input обернут в label.

4 ответа 4

4

Для данной разметки проще использовать js или jquery:

$('input[type="radio"]').click(function() {
  if ($(this).prop("checked") === true) {
    $(this).closest('label').addClass('check').siblings().removeClass('check');
  } else if ($(this).prop("checked") === false) {
    $(this).closest('label').removeClass('check');
  }
});
label {
  display: block;
}

label.check {
  border: 1px solid;
}
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>


<label class="product--items"><input type="radio" class="radio" name="val" value="1" checked="checked">Один</label>
<label class="product--items"><input type="radio" class="radio" name="val" value="1">Два</label>
<label class="product--items"><input type="radio" class="radio" name="val" value="1">Три</label>

Если все же есть возможность вставить внутрь label еще тег, например, span, то:

label {
  display: block;
  position: relative;
}

label>input:checked~span {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 1px solid #000;
}
<label class="product--items"><input type="radio" class="radio" name="val" value="1" checked="checked">Один <span></span></label>
  <label class="product--items"><input type="radio" class="radio" name="val" value="1">Два <span></span></label>
  <label class="product--items"><input type="radio" class="radio" name="val" value="1">Три <span></span></label>
  

3
  • 1
    @LADYX, 😉 Спасибо! 🎄❄❄❄❄❄❄❄❄❄
    – SVE
    21 дек 2018 в 19:20
  • 1
    @Sevastopol', спасибо! Взаимно! ;)
    – SVE
    2 мар 2020 в 18:36
  • На гридах можно сделать используя только css. Хм.. А пожалуй, без гридов тоже можно тем же способом, даже проще...
    – Qwertiy
    14 янв 2022 в 19:47
1

В хроме работает, в FF какая-то дичь...

*, *::before, *::after {
  box-sizing: border-box;
}

label {
  display: inline-flex;
  flex-direction: row-reverse;
  align-items: center;
  height: 2em;
  padding: 0 .5em;
  overflow: hidden;
}

label::before {
  content: "";
  order: 2;
  flex: 0 0 0px;
  min-width: calc(100% + 1em);
  height: 100%;
  position: relative;
  left: -1em;
  border: 1px solid;
}

input {
  order: 1;
  font-size: inherit;
  margin-left: 0;
}

:checked {
  margin-left: calc(-100% + 2px - 1.5em);
}
<label><input type="checkbox" checked="checked">Один</label>
<label><input type="checkbox">Два</label>
<label><input type="checkbox">Три</label>

2
  • @Sevastopol', ну вообще тут в коде дичь, но хром как-то понял))
    – Qwertiy
    20 дек 2021 в 17:54
  • @Sevastopol', margin в процентах в контейнере, на ширину которого влияет этот margin - это дичь)
    – Qwertiy
    21 дек 2021 в 16:12
1

Придумал более-менее нормальное решение:

*, *::before, *::after {
  box-sizing: border-box;
}

label {
  display: inline-grid;
  grid-template: 100% 100% 100% / auto auto;
  align-items: center;
  height: 2em;
  padding: 0 .5em;
  gap: 0 .25em;
  overflow: hidden;
}

label::before {
  content: "";
  grid-column: 1;
  grid-row: 1;
}

label::after {
  content: "";
  grid-column: 1 / -1;
  border: 1px solid;
  height: 100%;
  position: relative;
  top: -200%;
  margin: 0 -.5em;
}

input {
  margin: 0;
  grid-column: 1;
  grid-row: 1;
  font-size: inherit;
}

input:checked {
  grid-row: 2;
  position: relative;
  top: -100%;
}
<label><input type="checkbox" checked="checked">Один</label>
<label><input type="checkbox">Два</label>
<label><input type="checkbox">Три</label>

1

И теоретически самый нормальный способ.. А практически, что-то чекбокс в хроме размытый получился - похоже, ему горизонтальные линии между пикселями порезали...

*, *::before, *::after {
  box-sizing: border-box;
}

label {
  display: inline-block;
  height: 2em;
  line-height: 2em;
  padding: 0 .5em;
  overflow: hidden;
}

label::after {
  content: "";
  display: block;
  height: inherit;
  border: 1px solid;
  position: relative;
  top: -200%;
  margin: 0 -.5em;
}

input {
  margin: 0 .25em 0 0;
  font-size: inherit;
  height: inherit;
  vertical-align: top;
}

input:checked {
  margin-bottom: 2em;
}
<label><input type="checkbox" checked="checked">Один</label>
<label><input type="checkbox">Два</label>
<label><input type="checkbox">Три</label>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

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