Forms » How do i make the boxes look good?

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 :).

CSS

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

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;">

Which Forum Software are you using? vBulletin? phpBB?

Quote:

---

Originally Posted by KnownSinner

Which Forum Software are you using? vBulletin? phpBB?

---

Nobody said anything about forums.

Quote:

---

Originally Posted by Trinity

Nobody said anything about forums.

---

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

Quote:

---

Originally Posted by Calon

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'.

I haven't said anything about forums? :S

Hey Meti,

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

Code:

---

<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:

Code:

---

<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.

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

eg:

HTML Code:

---

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!