Как сверстать radio-input-ы?

Question

[Наталия]

Ваш личный самый удобный способ. Чтобы при наведении инпуты меняли цвет, а при нажатии оставался такой же цвет как при наведении. Знаю у всех разные способы, но хочу поинтересоваться у кого какие?

Comments

[Rustam Bainazarov]

К вёрстке это не имеет никакого отношения, это вопрос дизайна. Лучше поставьте иные теги.

Answer 1

[ReActor Дмитрий Вершанский]

<input type="password" value="" />

input[type="password"]:hover, input[type="password"]:focus {
   background: #bbb;
}

Comments

[Наталия]

а как радио инпут с надписью, какой нибудь?

[ReActor Дмитрий Вершанский]

input[type=radio] {
    display: none;
}

label {
    display: inline-block;
    cursor: pointer;
}

.radio_custom {
    display: inline-block;
    position: relative;
    width: 15px;
    height: 15px;

    border-radius: 50%;
    background: #fff;
}

.radio_custom::before {
    content: '';
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;

    background: #f5cc89;
    border-radius: 50%;

    transform: scale(0);
    transition: 0.3s;

    /* outline: solid 1px #f5cc89;
    outline-offset: 3px;

    -webkit-outline-radius: 50px;
    -moz-outline-radius: 50px;
    -o-outline-radius: 50px; */  
}

input:checked + .radio_custom::before {
    transform: scale(1);
}