Creating custom html text boxes

Question

Hi guys

Just wondering how you would go about creating the effect as seen in the following image:

Image

The part i'd like to attempt to recreate is the gradient within the text field itself along with the line border surrounding the text box.

Thanks.

Answer 1

You can just set the CSS attributes on the input element in question. background-image for the gradient and border for the border.

Answer 2

This can also be done using CSS3, reducing the need to load images. The problem, of course, is that it can become a little tricky cross-browser.

Heres a demo: Demo

Heres a tutorial on reproducing the demo: Tutorial