Как Википедия делает свое поле поиска? - PullRequest
Новая
       5

Как Википедия делает свое поле поиска?

0 голосов
/ 12 апреля 2011

Я хотел бы знать, как Википедия делает свое поле поиска. Под этим я подразумеваю две вещи: его градиент и его кнопку.

Как получается градиент в поле? На данный момент это легко сделать с помощью кросс-браузера CSS, но когда вы создаете код IE CSS, он создает псевдоним текста. Википедия имеет градиентный фон, но текст по-прежнему сглаживается! Как они это делают?

Кроме того, как они поместили кликабельную кнопку поиска ВНУТРИ текстового поля?

Спасибо.

Ответы [ 2 ]

0 голосов
/ 12 апреля 2011

Похоже, что фактический ввод для поиска не имеет стиля, то есть не имеет границы и прозрачного фона.Содержащий div стилизован так, чтобы выглядеть как поле ввода (граница и градиент).Кликабельная кнопка находится внутри элемента div, но не внутри фактического элемента ввода.

0 голосов
/ 12 апреля 2011

Вы можете просто посмотреть на код. Окно поиска в том виде, в котором оно отображается, представляет собой только элемент div с рамкой. Этот div имеет градиент, установленный через CSS (background-image). Как видите, элемент button тоже находится не внутри текстового поля. 

<div id="simpleSearch">
    <input id="searchInput" name="search" type="text"  title="Search Wikipedia [f]" accesskey="f"  value="" />
    <button id="searchButton" type='submit' name='button'  title=""><img src="[x]" alt="Filltext" /></button>
</div>
...