CODEWITHSUNDEEP
htmlcss
Angelo Borsotti
Angelo Borsotti

Reputation: 31

how to style differently two pieces of text in a same input type=text

I would like to know how to style differently two portions of the text in a same input type=text, much the same as Google does. When you enter a couple of characters in the Google search box, they are rendered in normal black font, but they are followed by a suggested completion rendered in gray font. So, we have two portions with different font properties in a same input box.

Upvotes: 3

Views: 2178

Answers (3)

Douglas
Douglas

Reputation: 37761

Google uses two text boxes directly on top of each-other. They have different text colour, and the top one has a transparent background. Have a look at it using Firebug to see how it works.

Upvotes: 0

fearofawhackplanet
fearofawhackplanet

Reputation: 53396

Google doesn't actually do that though does it? At least thats not what it looks like on my computer. The textbox is in normal font, it's the suggested completetion items that are styled. They are probably just renedered in a div or something, not an input.

Upvotes: 1

Pekka
Pekka

Reputation: 449435

A text input is uni-coloured - no way around that. An effect like this can be achieved only through Javascript trickery.

Google are definitely working with a div element with grey text hovering above or below the text input. The div is invisible at first, but when you start typing, it will contain the lookup text. It has the same font size as the text input. The text input will contain the full suggestion, and is coloured black.

I imagine this is not entirely trivial to do in a way that works across browsers... but not at all impossible, either. There may already exist a component or jQuery plugin for this.

Upvotes: 4

Related Questions