How do I get good looking input boxes?

@OM2Jan 10.2007

How do I get good looking input boxes?
I’ve seen other websites that have a nice looking subtle inner shadow on the top and right.

How do I get the same?

Thanks.

to post a comment

CSS

@gil_davisJan 10.2007 — #Look at their CSS.

@OM2authorJan 10.2007 — #erm... i would do...

but i can't find any samples to look at. ?

is it done in css or is it done using images?

@h3r0Jan 10.2007 — #It's done is CSS, but images can be used inside of the CSS.

@OM2authorJan 10.2007 — #well... i know you can use images inside css.

but... it was just that i wasn't sure how you would put very small images inside of the input box.

images: use as a background for something.

i didn't know you could do anything else?

can you give some examples of how its done?

@aussie_girlJan 11.2007 — #Here is some exaggerated inline styles but it should be enough to understand and transfer them to a style sheet.

[code=html]
 <input type="text" name="T1" size="20" style="border-left:11px solid #00FFFF; border-right:11px ridge #00FFFF; border-top:11px ridge #00FFFF; border-bottom:11px ridge #00FFFF; background-color: #800000; font-family:serif; color:#FFFFFF; font-size:1em; letter-spacing:6pt; vertical-align:text-bottom; font-style:italic; font-weight:bold; padding-left:3px; padding-right:1px; padding-top:2px; padding-bottom:1px">
 
 <textarea rows="2" name="S1" cols="20" style="border: 5px inset #000000; background-image: url('imagename.gif')" class="myform"></textarea><input type="submit" value="Submit" name="B3"><input type="reset" value="Reset" name="B4"></p>
 <input type="text" name="T2" size="20">
 
 <input type="submit" value="Submit" name="B5" style="color: #FFFFFF; font-family: Tahoma; text-transform: uppercase; font-weight: bold; border: 3px double #008000; background-color: #008000"><input type="reset" value="Reset" name="B6">
 
 [/code]

@Paul_JrJan 11.2007 — #well... i know you can use images inside css.

but... it was just that i wasn't sure how you would put very small images inside of the input box.

images: use as a background for something.

i didn't know you could do anything else?

can you give some examples of how its done?[/QUOTE]
It's just a background image applied to the form controls. Take a look at the attached example.

[upl-file uuid=12864f6e-39c3-407d-8b02-bdb8442ffb88 size=2kB]form-test.zip[/upl-file]

@OM2authorJan 11.2007 — #hey kewl!

just what i was looking for! ?

erm... just one more thing... how do i control the black outline of the components?

thanks.

@Paul_JrJan 11.2007 — #You can control the border using the CSS [font=courier]border[/font] property. [url=http://www.w3.org/TR/CSS21/box.html#border-properties]CSS 2.1 ref.[/url] | [url=http://www.w3schools.com/css/css_border.asp]W3Schools ref.[/url]

How do I get good looking input boxes?

8 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

How do I get good looking input boxes?

8 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

8 Comments(s) _↴

Also in #CSS _↴