Как выровнять input и label?

Question

Не получается выровнять input и label. Подскажите, пожалуйста: в чем может быть проблема?

<input id="radio" type="radio" name="remember" value="remember"/>
<label for="radio">ATCERĒTIES MANI</label>

#radio {
    display: none;
    box-shadow: 0 3px 2px 0px rgba(0, 0, 0, .2);
}

#radio + label {
    background-color: white;
    width: 19px;
    height: 19px;
    border: 1px solid #210038;
    border-radius: 50%;
    background-size: 15%;
    margin-left: -100px;
    cursor: pointer;
}

#radio:checked + label {
    background-color: #210038;
    border: 1px solid #210038;
    border-radius: 50%;
    background-size: 13%;
    cursor: pointer;
    transition: 1s;
}

#remember_container {
    display: inline-block;
    height: 3px; 
    margin: 7px; 
    padding: 10px;
    white-space: nowrap;
}

Answer 1

Для стилизации input лучше использовать ::before

#radio {
    display: none;
    box-shadow: 0 3px 2px 0px rgba(0, 0, 0, .2);
}
#radio + label{
    display: flex;
    align-items: center;
}
#radio + label::before {
    content: "";
    background-color: white;
    width: 19px;
    height: 19px;
    border: 1px solid #210038;
    border-radius: 50%;
    background-size: 15%;
    cursor: pointer;
    margin-right: 10px;
}

#radio:checked + label::before {
    content: "";
    background-color: #210038;
    border: 1px solid #210038;
    border-radius: 50%;
    background-size: 13%;
    cursor: pointer;
    transition: 1s;
}

#remember_container {
    display: inline-block;
    height: 3px; 
    margin: 7px; 
    padding: 10px;
    white-space: nowrap;
}

<input id="radio" type="radio" name="remember" value="remember"/>
<label for="radio">ATCERĒTIES MANI</label>

БЛОГ НА HUSL

Как выровнять input и label?

Ответы (1 шт):