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

Аватара пользователя
SuBbI
Сообщения: 161
Зарегистрирован: 02 янв 2010

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

<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>

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

Аватара пользователя
Distructor
Администратор
Сообщения: 1631
Зарегистрирован: 28 дек 2009

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

<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
Сообщения: 161
Зарегистрирован: 02 янв 2010
Добавил в таблицу стилей

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

.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="поиск..." />

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

Аватара пользователя
Distructor
Администратор
Сообщения: 1631
Зарегистрирован: 28 дек 2009
SuBbI писал(а):в чем болт мб?
"templates/default/images/search_bg.png" проверь правильность пути, причем он считается от файла css в котором описан

Аватара пользователя
SuBbI
Сообщения: 161
Зарегистрирован: 02 янв 2010
путь верный.
решил проблему по другому

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

<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;

">

Аватара пользователя
Distructor
Администратор
Сообщения: 1631
Зарегистрирован: 28 дек 2009

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

<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>

search_example.JPG
Вложения
search_example.rar    1.03 КБ • 120 скачиваний


Вернуться в «Вопросы по веб-дизайну и верстке»