The Arcive of vBulletin Modifications Site.

how to make rounded text input boxes · **Released**: 05-30-2002

all this really involves is setting a table cell background and a css thingamajigger to make the input background transparent. so, the first thing to do is to pick an input box you want to give rounded corners.

first thing to do is to upload the attached file to your images folder.

now, the <td> tag that that input field is in needs to have these attributes added/changed:

Code:

background="https://vborg.vbsupport.ru/images/textarea.gif" width="224" height="19"

then, add/change the style attribute on that input field to:

Code:

style="background-color: transparent; font-face: verdana, arial, sans-serif, helvetica, times; font-size: 10px; font-weight: bold; border: 0"

and you're done!

N!ck · #2 05-30-2002, 03:50 PM

it would probably help if i had attached this

N!ck · #3 05-30-2002, 06:47 PM

nobody's gonna let me see some examples?

N!ck · #4 05-30-2002, 06:54 PM

here are some alternates for textarea.gif

this one is chrome

N!ck · #5 05-30-2002, 06:56 PM

blue chrome

N!ck · #6 05-30-2002, 06:56 PM

red/maroon chrome

N!ck · #7 05-30-2002, 06:56 PM

gold/yellow

N!ck · #8 05-30-2002, 06:57 PM

green

Admin · #9 05-31-2002, 12:46 PM

Sounds cool, any live examples?

N!ck · #10 05-31-2002, 01:39 PM

i haven't implemented it on my forums yet, but here is a demo/example:

http://7nick3.hypermart.net/roundedinputs.html

feel free to view the source and look at the css i used on each input field