Как оформить ввод данных при наведении курсора, щелкнуть мышью?

Question

Мне нужно стилизовать два разных ввода, чтобы они выглядели по-разному при наведении курсора и при щелчке, так же, как кнопки. Обычно я использовал бы кнопки; тем не менее, одним из них является тип ввода = «сброс», и я предполагаю, что для этого проще использовать вход, чем писать сценарий сброса формы. Как один стиль ввода с типами «отправить» и «сброс» с помощью CSS для наведения мыши и щелчка?

Answer 1

Предполагая, что вы имеете в виду CSS, а не подход JavaScript, вы можете использовать псевдоклассы:

input[type=reset], /* CSS2.1 attribute-equals selector */
#resetButtonID,
.resetButtonClass-Name {
    /* the reset button */
}

input[type=reset]:hover,
#resetButtonID:hover,
.resetButtonClass-Name:hover {
    /* the reset button when hovered over */
}

input[type=reset]:active,
#resetButtonID:active,
.resetButtonClass-Name:active {
    /* the reset button when mouse-down */
}

input[type=reset]:focus,
#resetButtonID:focus,
.resetButtonClass-Name:focus {
    /* the reset button when focussed by keyboard-navigation */
}

JS Fiddle demo .

Answer 2

Это так же, как и любой другой элемент в CSS, есть селекторы psuedo для наведения и фокусировки, но не специально для щелчка.Вы также можете использовать селектор атрибута:

input[type="reset"]{/* attribute selector*/}
input[type="reset"]:hover{/* :hover psuedo selector*/}
input[type="reset"]:focus{/* :focus psuedo selector*/}
input[type="reset"]:active{/* :active psuedo selector (for click)*/}

Стиль фокуса будет применяться, когда пользователь первоначально щелкает (или фокусируется, конечно), но теряет стиль, когда пользователь перемещает фокус на другой элемент.Чтобы конкретно получить стили нажатия для этого небольшого момента, когда кнопка мыши нажата, используйте javascript или попробуйте селектор :active, который (я только сейчас понял) можно применить к элементам без привязки.