Иконка для полей ввода

[k0d]

Здравствуйте, форумчане! Верстаю сайт и озадачился таким вот вопросом.

Позволю себе предысторию...

Сейчас модно делать иконки у полей ввода (поиск, пароль, адрес почты и т.д.), которые визуально показывают тип информации, которую в них следует ввести.

Обычно это легко делается, через свойство тега background. Но мне почему-то показалось, что некрасиво, когда при наведении на эту иконку курсор остается "в режиме ввода текста" (ну вы поняли...), он имеет вид, как-будто его навели на поле ввода и не меняется.

Я подумал и решил, что надо сделать так:

Вначале html-код:

....
<div id="searchWrap_lvl2"><input type="text" name="search_field" id="search_field" value="Поиск"></div>
...

CSS:

#searchWrap_lvl2 {

	border: 1px solid #ccc;
	display: inline;
	padding-left: 35px;
	padding-bottom: 7px;
	padding-top: 5px;
	padding-right: 2px;
	border-radius: 4px;
	background: url(../images/images.jpg) no-repeat;
}
#search_field {
	border: 0px;
	height: 25px;
	width: 350px;

} 

Результат можно посмотреть тут: http://k0d.s21.webhost1.ru/

Хотел бы обсудить такой вот метод...

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

[Николя223]

хотя б так допилите http://jsfiddle.net/nikolya223/EmMDJ/

[k0d]

хотя б так допилите http://jsfiddle.net/nikolya223/EmMDJ/

Спасибо, конечно, за JS, но дело не в нем... Просто хотел услышать мнения людей про такой вот способ оформления полей.

печально то, что не работает свойство background-position и width.

П.С.

Николя, не следует писать вот так

<script type="text/javascript">

Современные браузеры сам распознают JS, без дополнительных инструкций... Это архаизм, в данном случае.

[Николя223]

Николя, не следует писать вот так

что за глупости... архаизм...

к вашему сведенью, я когда первый раз писал на JS( давно было и я не думал, что спустя столько времени я начну профессионально заниматься - тогда покодил и бросил))) , у меня был старый компьютер с Windows ME и браузер explorer 5 или 6 не помню) и естественно я и не заморачивался насчет указания типа языка... я к чему, ещё и тот explorer прекрассно обходился без этого атрибута, нужно было вроде language указывать я и его не указывал)) архаизм? ))

И я не вижу в вставке типа языка ничего предрассудительного. если так судить то 90% интернет-рессурсов погрязли в архаизмах... не переписывать же))))) Вы бы лучше о начинке скрипта беспокоились, а не об оболочке))

[RodgerFox]

Не понимаю, логики дополнительного дива для картинки?

[k0d]

А как бы вы сделали? Моя логика проста... Сам <input> делаем невидимым, а дивом задаем обводку и фон.

Или вы про мою верстку(ссылка выше)? Если да, то там встал ребром вопрос кроссбраузерности... Там можно было бы задать позиционирование background'a (в основном диве). Но не во всех браузерах одинаково работает (в частности IE). Поэтому я решил обернуть input дополнительным дивом. Или, по-вашему, я что-то упустил?

[RodgerFox]

почему не задавать стили инпуту?

[Svatov]

Если картинка выполняет функцию label, я бы ее туда бы и поместил, если фунцию кнопки поиска соответственно input type=submit. Надо отталкиваться от того какую роль играет, стандартный поиск уже существует н-колличество лет. Можно даже посмотреть как другие делают и сделать статистический анализ и сделать так как большинство.

[Dzhav]

Я бы поставил иконку абсолютно над полем ввода. Вот так: http://jsfiddle.net/Dzhav/dEkrn/