0

у меня есть два обычных радио-инпута, которые должны иметь жирный текст при состоянии checked
Вот пример – Пример на codepen
Но в моем примере при переключении дергается текст и инпуты. Можно как-то это сделать, чтобы ничего не дергалось? Подскажите пожалуйста.

1 ответ 1

5

Можно использовать псевдоэлемент, ему же присвоить такой же текст(как основной) и выставить bold. Высоту псевдоэлементу даем 0 и скрываем через visibility. Тогда блок будет занимать тот же размер(ширину), что и с текстом bold Примерно так:

.showcase-form__form-wrapper {
  width: 300px;
  border: 1px solid #bebebe;
  padding: 25px;
}
.showcase-form__form-togglers input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  border: 0;
  padding: 0;
  white-space: nowrap;
  clip-path: inset(100%);
  clip: rect(0 0 0 0);
  overflow: hidden;
}
.showcase-form__form-togglers label {
  position: relative;
  font-size: 14px;
  line-height: 14px;
  color: #333333;
  display: inline-block;
  padding-left: 33px;
  margin-right: 40px;
}
.showcase-form__form-togglers label span {
  display: inline-block;
}
.showcase-form__form-togglers label span:before {
  content: attr(data-title);
  display: block;
  font-weight: bold;
  height: 0;
  overflow: hidden;
  visibility: hidden;
}
.showcase-form__form-togglers input ~ label::before {
  position: absolute;
  content: "";
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  border: 1px solid #bebebe;
  border-radius: 50%;
}
.showcase-form__form-togglers input:checked + label {
  font-weight: 700;
}
.showcase-form__form-togglers input:checked + label::after {
  position: absolute;
  content: "";
  top: 50%;
  left: 5px;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  background-color: #0083ca;
  border-radius: 50%;
}
<div class="showcase-form__form-wrapper">
  <div class="showcase-form__form-togglers">
    <input type="radio" name="product-type" id="product-field" checked>
    <label for="product-field"><span data-title="Товар">Товар</span></label>

    <input type="radio" name="product-type" id="service-field">
    <label for="service-field"><span data-title="Услуга">Услуга</span></label>
  </div>
</div>

Ваш ответ

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

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