Forms » How do i make the boxes look good?

[Meti]

Hey,
I wonder how I can make the boxes look nicer on a form, like an image i would create, and use it for a form.
Better than those ugly normal boxes.

Moved by Invent (Forum Moderator) from Designing & Development: Please post in the correct forum next time, thanks :).

[Florx]

CSS

http://designshack.co.uk/tutorials/10-css-form-examples

[Tom-743]

say you have <input type="text"> you could add css to it to change the background image <input type="text" style="background: url('imagehere'); width: imagewidth px; height: imageheight px; border: 0px;">

[Fehm]

Which Forum Software are you using? vBulletin? phpBB?

[Trinity]

Which Forum Software are you using? vBulletin? phpBB?

Nobody said anything about forums.

[Calon]

Nobody said anything about forums.
Meti just got a vBulletin, so it was probably a typo.

[Trinity]

Meti just got a vBulletin, so it was probably a typo.

I don't understand what you're on about.
Maybe he misread the title 'Forms' -- 'Forums'.

[Meti]

I haven't said anything about forums? :S

[craigg.]

Hey Meti,

In your css, you should make a class. A class is defined using a period (.) at the start. e.g.


<style>
/* CSS *\
.fields {
}
</style>

In your input box, include the code " class="fields" ". This will relate your HTML to your CSS. Have a play around with the css. A simple css code for a field:



<style>
/* CSS *\
.fields {
background-color: #dddddd;
border: 2px #ad1f41 solid;
font-family: Tahoma, Verdana;
font-size: 11px;
font-weight: bold;
color: #757575;
}
</style>

Have a play around with it. Hope this helped.

[Luckyrare]

You can also edit the CSS by changing the CSS of input

eg:



input{
border: 1px solid #FFFFFF;
background: #000000;
}


so on...

If you are wanting to style each form differently, or have multiple form styles then you would use craiggs method!