Как вертикально выровнять точку .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); }
Комментариев нет:
Отправить комментарий