Страницы

Поиск по вопросам

пятница, 12 июля 2019 г.

Вертикально выровнять радиокнопку

Как вертикально выровнять точку .radio + label:before, независимо сколько после неё будет текста codepen
.button-radio{ padding: 15px 25px; } .radio { position: absolute; z-index: -1; opacity: 0; margin: 10px 0 0 7px; } .button-radio label p { margin-top: 0; margin-bottom: 15px; } .button-radio label p:last-child { margin-bottom: 0; margin-top: 0; } .radio + label { position: relative; width: 300px; padding: 0 0 0 55px; /* margin: 15px 25px; */ cursor: pointer; display: inline-block; line-height: 3; border-radius: 25px; border: 1px solid; } .radio + label:before { content: ''; position: absolute; top: 14px; left: 15px; width: 22px; height: 22px; border: 1px solid #CDD1DA; border-radius: 50%; background: #FFF; } .radio + label:after { content: ''; position: absolute; top: 18px; left: 19px; width: 16px; height: 16px; border-radius: 50%; background: #9FD468; box-shadow: inset 0 1px 1px rgba(0,0,0,.5); opacity: 0; transition: .2s; } .radio:checked + label{ background: #0f74a8; color: #fff; } .radio:checked + label:after { opacity: 1; } .radio:focus + label:before { box-shadow: 0 0 0 3px rgba(255,255,0,.7); }



Ответ

.button-radio { padding: 15px 25px; } .radio { position: absolute; z-index: -1; opacity: 0; margin: 10px 0 0 7px; } .button-radio label p { margin-top: 0; margin-bottom: 15px; } .button-radio label p:last-child { margin-bottom: 0; margin-top: 0; } .radio+label { position: relative; width: 300px; padding: 0 0 0 55px; /* margin: 15px 25px; */ cursor: pointer; display: inline-block; line-height: 3; border-radius: 25px; border: 1px solid; } .radio+label:before { content: ''; position: absolute; top: 0; bottom: 0; margin: auto; left: 15px; width: 22px; height: 22px; border: 1px solid #CDD1DA; border-radius: 50%; background: #FFF; } .radio+label:after { content: ''; position: absolute; top: 0; bottom: 0; margin: auto; left: 19px; width: 16px; height: 16px; border-radius: 50%; background: #9FD468; box-shadow: inset 0 1px 1px rgba(0, 0, 0, .5); opacity: 0; transition: .2s; } .radio:checked+label { background: #0f74a8; color: #fff; } .radio:checked+label:after { opacity: 1; } .radio:focus+label:before { box-shadow: 0 0 0 3px rgba(255, 255, 0, .7); }


Комментариев нет:

Отправить комментарий