type="radio" один из самых сложно поддающихся стилизации элиментов в html. Его вид напрямую зависит от настроек браузера и везде выглядит по-разному.
Если мы хотим стилизовать инпут, нам нужно полностью сбросить вид стандартных кружков и добавить стилизацию для "накладных"
HTML:
делаем сам инпут:
<input class="rooms-radio-real" type="radio" value="1">
и рядом делаем span для "накладной" опции
<span class="rooms-radio-fake">1</span>
CSS: (сбрасываем все стили)
.rooms-radio-real {
opacity: 0;
appearance: none;
height: 0;
width: 0;
margin: 0;
}
Добавляем совершенно любые стили, цвета и размеры для наших "кастомных" кнопок
.rooms-radio-fake {
display: inline-block;
width: 90px;
height: 50px;
background-color: #e2e2e2;
text-align: center;
line-height: 50px;
font-size: 22px;
cursor: pointer;
}
Можем также задать дополнительных стиль для выбранного элимента:
.rooms-radio-real:checked + .rooms-radio-fake {
background-color: grey;
}
Посмореть код: https://codepen.io/AlinaK96/pen/JjmwWgr