Как стилизовать type="radio" - html / css

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