Creating custom html text boxes

Question

Just wondering how you would go about creating the effect as seen in the following 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.

Brant · Accepted Answer · 2010-05-20 15:33:57Z

3

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

answered May 20, 2010 at 15:33

Brant

6,0494 gold badges38 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

nice reply, just what was needed

Fletcher Moore · Accepted Answer · 2010-05-20 15:11:31Z

3

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

answered May 20, 2010 at 15:11

Fletcher Moore

13.9k11 gold badges43 silver badges59 bronze badges