Как мне оформить ввод с помощью CSS?

Question

Чтобы защитить пользователей, вы не можете создавать стили для загрузки с помощью CSS.Таким образом, решение заключается в том, чтобы скрыть реальную загрузку и показать пользователю какой-то другой элемент, который выглядит так, как вы хотите.

Я запустил JSFiddle , который показывает, как вы можете маскировать невидимую реальную загрузкуповерх простой кнопки или чего-то еще, чтобы вы могли стилизовать кнопку - но все же заставить пользователя щелкнуть по входу загрузки.

Однако проблема заключается в том, что я не могу заставить работать состояния при наведении, поскольку реальнаяввод находится над кнопкой.

Я неправильно подхожу к этой проблеме?Как вы оформляете ввод данных?

Answer 1

Поиграв еще немного, я наконец заработал, сделав input дочерним для элемента кнопки «Загрузить». Мне также пришлось сделать кнопку загрузки div, так как неправильно указывать input в качестве потомка button.

Смотрите это в действии здесь

Answer 2

Если я понимаю вопрос, это то, чего вы хотите достичь

jsfiddle.net / yVFWJ / 1 /

.button {
    width: 47px;
    height: 19px;
    cursor: pointer;
    text-indent: -9999px;
    border: none;
    background-image: url(http://www.hudson-realestate.com/us/images/uploadButton.gif);
}

Answer 3

Хм ... Вы можете использовать событие document.onmousemove. Там вы можете проверить, находится ли ваше положение мыши внутри области кнопок. Если это так, просто измените класс кнопки, например, на «send_button_hover». Если это не так, измените класс на, например, «send_button».

Вы можете сделать это, используя чистый JavaScript. Это не очень сложно. Но это будет много проще, если вы используете jQuery. У вас есть mousemove () функция для события handeling; height () и width () функции для расчета размера кнопки; функции смещения для расчета положения кнопки и toggleClass () для изменения класса кнопки.