у меня есть два обычных радио-инпута, которые должны иметь жирный текст при состоянии checked
Вот пример – Пример на codepen
Но в моем примере при переключении дергается текст и инпуты. Можно как-то это сделать, чтобы ничего не дергалось? Подскажите пожалуйста.
1 ответ
Можно использовать псевдоэлемент, ему же присвоить такой же текст(как основной) и выставить 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>