Сделать часть ввода [текст] серой?

Question

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

Спасибо, Фела

Answer 1

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

Answer 2

Вы можете начать с серого background-image и настроить его background-position свойство

Answer 3

Ты не, Если вы внимательно посмотрите на Google Instant, вы увидите, что у них есть элемент, расположенный точно там, где находится поле ввода. Итак, чтобы сделать это просто: просто поместите div, где ваше поле ввода. Тогда вот так:

<div>
<span class="originaltext">hello</span>
</span class="suggested">world</span>
</div>