Информационная лента
Чат


Загрузка данных...

Необходимо авторизоваться!

Свежие обсуждения


Загрузка данных...

Топ активов

  • 1 · Посты: 4944 · Репутация: 187
  • 2 · Посты: 3194 · Репутация: 333
  • 3 · Посты: 2321 · Репутация: 1319
  • 4 · Посты: 1613 · Репутация: 373
  • 5 · Посты: 1038 · Репутация: 42

Форум
Страница 1 из 11
Форум » uJS.su » Идеи скриптов » Модифицируем поле для ввода
Модифицируем поле для ввода
Оффлайн
WaRrOcK · Написал: 68 сообщений · Репутация: 60 · Группа: «Разработчик»
Как сделать так, что бы внутри поля для ввода была поверх него картинка как на скрине ниже?

21.03.2013, в 15:13 | # 1 · | Понравилось: 0

Оффлайн
HeadMad · Написал: 46 сообщений · Репутация: 51 · Группа: «Проверенный»
Примерно:
Код
<style>
.searchBlock {
  display: inline-block;
  width: 400px;
  position:relative
}

.searchRequest {
  box-sizing:border-box;
  height: 30px;
  width: 100%;
  padding:0 30px 0 10px;
  border:1px solid #ccc;
}
.searchReset {
  background:#CCC url(/img/reset.png);
  border:0;
  display: block;
  height: 20px;
  width: 20px;
  position: absolute;
  top: 5px;
  right: 5px;
}
</style>

<form>
<div class="searchBlock">
<input class="searchRequest" type="text" placeholder="Поиск..."><input class="searchReset" type="reset" value="">
</div>
<input type="submit" value="Найти">
</form>
Стили можешь настроить как нравится.
А вообще, если к полю ввода запроса поставить type="search", то в webkit Браузерах автоматически будет появляться синий крестик для удаления запроса. Но это- самый простой и самый универсальный способ, как мне думается))
21.03.2013, в 20:01 | # 2 · | Понравилось: 0

Форум » uJS.su » Идеи скриптов » Модифицируем поле для ввода
Страница 1 из 11
Поиск:
uJS.su - сайт, посвященный уникальным разработкам для системы uCoz. У нас Вы найдете десятки готовых интересных уникальных решений для Вашего сайта, а также сможете оставить свою идею, которую мы постараемся реализовать.