Иконка в input поле

SuBbI

<div style="position: absolute; top: 6px; right: 17px;">
	<form id="quick-search" action="" method="post" onsubmit="
		$(this).attr('action', $('#search-action').val());
		var txt=$('#search-text').val(); return !(txt=='поиск...' || !txt);
	">
	  <input type="hidden" name="max" value="1" />
		<input type="hidden" name="to" value="1" />
		<input id="search-text" type="text" name="nm" onfocus="if(this.value=='поиск...') this.value='';" onblur="if(this.value=='') this.value='поиск...';" value="поиск..." class="hint" style="width: 120px;" />
		<select id="search-action">
			<option value="tracker.php#results" selected="selected"> по трекеру </option>
			<option value="search.php"> по форуму </option>
	  </select>
		<input type="submit" class="med bold" value="&raquo;" style="width: 30px;" />
	</form>
</div>

иимеется код поиска,подскажите как есго сверстать картинкой?

Код: Выделить всё

<input class="search-text" type="text" name="nm" onfocus="if(this.value=='поиск...') this.value='';" onblur="if(this.value=='') this.value='поиск...';" value="поиск..." />

Код: Выделить всё

<style>
.search-text {
        padding-left: 17px;
        background: url("images/search.png") 0 40% no-repeat;
}
</style>

Естественно отступы надо подгонять под размер картинки лупы и высоту поля ввода

Если же требуется использовать слишком сложное оформление поля, которое проще вставить целой картинкой,
то ставят его фоном, у поля ввода убирают рамку и позиционируют его с помощью отступов в нужном месте

SuBbI

Добавил в таблицу стилей

Код: Выделить всё

.search-text {
        padding-left: 17px;
        background: url("templates/default/images/search_bg.png") 0 40% no-repeat;
}

поиск сделал

Код: Выделить всё

<input class="search-text" type="text" name="nm" onfocus="if(this.value=='поиск...') this.value='';" onblur="if(this.value=='') this.value='поиск...';" value="поиск..." />

но что-то картинки не получилось.....
в чем болт мб?

SuBbI писал(а):в чем болт мб?

"templates/default/images/search_bg.png" проверь правильность пути, причем он считается от файла css в котором описан

SuBbI

путь верный.
решил проблему по другому

Код: Выделить всё

<div style="position: absolute; top: 1px; right: 16px; 
margin-top: 7px; 

padding-top: 9px;
width:275px;
height:36px;
margin-right:-15px;
background:url('templates/default/images/search_bg.png') no-repeat; 
padding-left: 42px;

">

Код: Выделить всё

<html>
<head>
    <meta http-equiv=content-type content="text/html; charset=windows-1251">    
    <title>Пример для форума Coder.v-Tanke.ru &bull; Иконка в input поле</title>
    <style>
      .search-text {
              padding-left: 18px;
              background: url("search.png") 2px 50% no-repeat;
              border: 1px solid #CCC;
      }
    </style>
</head>
<body style="padding:50px;font-size:18px;text-align:center;">
    <input class="search-text" type="text" onfocus="if(this.value=='поиск...') this.value='';" onblur="if(this.value=='') this.value='поиск...';" value="поиск..." />    
</body>
</html>