Сайт, форум, блог
Создание, поддержка, продвижение
Submit картинкой
Захотелось сделать красивую формочку, причем так, чтобы использовать не <input type=»image»>, а <input type=»submit»>. Оказалось, что это не очень сложно, несмотря на то, что
http://www.w3.org/TR/html4/interact/forms.html#input-control-types
submit – Creates a submit button.
image – Creates a graphical submit button. The value of the src attribute specifies the URI of the image that will decorate the button. For accessibility reasons, authors should provide alternate text for the image via the alt attribute.
Сейчас у нас уже на дворе 2012 год и html5.
Итак:
.submit {
background: transparent url('путь к картинке') no-repeat center top;
border: 0;
margin: 0;
padding: 0;
width: 105px; // ширина картинки
height: 35px; // высота картинки
text-indent: -1000em; // убираем текст
cursor: pointer;
cursor: hand;
}
Отзывов (2) на «Submit картинкой»
Оставить отзыв
15.04.2012 в 9:45 пп
Ваше решение понятно, кроме одного – зачем в CSS вот это:
text-indent: -1000em; // убираем текст
т.е. если хотелось чтобы кнопка сабмита была в виде картинки, то чем не угодил стандартный тэг ?
Я бы понял, если хочется сделать красивую кнопку, но так, чтобы текст ее можно было менять – тогда как раз ваш вариант с написанием CSS и графической подложкой хорошо работает – получаем красивую кнопку на все случаи жизни, а текст поверх кнопки прямо в форме задаем и не надо кучу картинок делать.
Но вы специально выключили показ текста.
В общем, практическая область применения вашего кода осталась для меня загадкой.
Если не секрет – зачем такой хитрый способ?
18.04.2012 в 6:37 пп
В некоторых случаях переворачивать чужой программный код лень, а css подправить можно быстро и легко.