Стиль иконок панели поиска

0

У меня есть поле поиска. Как я могу поместить другой значок поиска в текстовое поле поиска?

Как и в этом изображении:

Изображение 174551

Мне нужна эта кнопка увеличения в моем текстовом поле (которое будет доступно клику)

Вот мое поле поиска: http://jsfiddle.net/ULtH4/

Вот мой код:

HTML:

<input type="text" name="search_people" placeholder="Search for people..."  class="search_container_textfield" size="30" value="" id="inputString"   />

CSS:

.search_container {
    background-color: #FFFFFF;
    width: 500px;
    border-radius:5px 5px 5px 5px;
    border:solid 1px #DFDFDF;
    padding:2px;
}

    .search_container_textfield {
        background-color: #FFFFFF;
        border: 1px solid #CCCCCC;
        border-collapse: collapse;
        border-radius: 5px 5px 5px 5px;
        float: left;
        font-size: 13px;
        height: 23px;
        padding: 6px 4px;
        position: relative;
        width: 496px;s
    }

    .search_container_text {
    color:#006666; font-size:13px; font-weight:normal;vertical-align:top !important;
    }
Теги:

2 ответа

2
Лучший ответ

Здесь скрипка

<div class="search_container">
  <input type="text" name="search_people" placeholder="Search for people..."  class="search_container_textfield" size="30" value="" id="inputString" />
  <a href="search_people.php?id=123555"></a>
</div>


.search_container_textfield {
  border: 1px solid #ccc;
  border-radius: 5px 5px 5px 5px;
  float: left;
  font-size: 13px;
  height: 23px;
  padding: 6px 4px;
  position: relative;
  width: 496px;
}
.search_container_textfield:focus {
  outline: none;
  box-shadow: 0 0 2px 1px #00aeff;
}
.search_container a {
  background: url(http://www.extendcomm.com/wp-content/themes/extendcomm/images/icons/icon-search.png) center no-repeat;
  background-size: 30px 30px; /* background-size added because original icon is 128x128px */
  display: block;
  position: relative;
  width: 37px;
  height: 35px;
  float: right;
  margin: -37px -6px 0 0;
  padding-left: 3px;
  border: 1px solid #ccc;
  border-radius: 0 5px 5px 0;
}
.search_container a:hover {
  background: #e8e8e8 url(http://www.extendcomm.com/wp-content/themes/extendcomm/images/icons/icon-search.png) center no-repeat;
  background-size: 30px 30px; /* background-size added because original icon is 128x128px */    
}

Конечный результат

Изображение 174551

И если вы хотите найти идентификатор из поиска, представленного ниже, это решение jQuery

$(function() {
   $('.search_container a').hover(function() {
      var id = $('.search_container_textfield').val();
      $(this).attr('href', 'search_people.php?id='+id);
   });
});
  • 0
    Могу ли я передать строку запроса? search_people.php? ID = 123555
  • 0
    Я не понимаю, пожалуйста, объясните немного лучше. Вам нужен целый скрипт для функции поиска.
Показать ещё 8 комментариев
1

Вы можете обернуть <span> вокруг ввода, а затем использовать span:after как контент будет установлен, установите его абсолютным и выровняйте его так, как вы хотите.

Скрипт здесь Все, что вам нужно сделать, это изменить "Поиск" значка.

Вот еще один мой метод, который поддерживает шрифты fontawesome-.

У этой ссылки есть значок (который также доступен для клика)

  • 0
    Как я могу разместить изображение там?
  • 0
    Обновленный пост, теперь он имеет значки
Показать ещё 4 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню