3 Replies - 1032 Views - Last Post: 17 December 2007 - 01:16 PM

#1 HelloInsomnia  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 8
  • Joined: 15-December 07

Formatting forms in CSS

Posted 15 December 2007 - 06:46 AM

I can [obviously] format my links and paragraphs and such using CSS but is there a way to format individual fields using div layers and CSS?

An example of my CSS would be:

div#layer form {
background-color: #000000;
}


Is This A Good Question/Topic? 0
  • +

Replies To: Formatting forms in CSS

#2 Martyr2  Icon User is offline

  • Programming Theoretician
  • member icon

Reputation: 4332
  • View blog
  • Posts: 12,127
  • Joined: 18-April 07

Re: Formatting forms in CSS

Posted 15 December 2007 - 10:49 AM

Sure you can format form elements. Just apply the style to the various form input elements as you would any other tags. You can do such things as hide their borders, change their background colors, change their fonts etc.

Below I have put a style on the form tag to change its border and added some padding to the left.

form {
 border: 1px solid #c0c0c0;
 padding-left: 3px;
}



You can also modify the input elements. Below I make all the fields of my form have a red background...

input {
 background-color: #FF0000;
}



The above code would make my radio buttons, checkboxes, textboxes etc with a red background. Of course this won't effect things like textareas or select drop down boxes. But you can modify those tags as well.

I hope this clarifies some things. Enjoy!

"At DIC we be form styling code ninjas!" :snap:
Was This Post Helpful? 0
  • +
  • -

#3 HelloInsomnia  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 8
  • Joined: 15-December 07

Re: Formatting forms in CSS

Posted 15 December 2007 - 08:45 PM

Thank you, the input was what I was looking for :)
Was This Post Helpful? 0
  • +
  • -

#4 girasquid  Icon User is offline

  • Barbarbar
  • member icon

Reputation: 108
  • View blog
  • Posts: 1,825
  • Joined: 03-October 06

Re: Formatting forms in CSS

Posted 17 December 2007 - 01:16 PM

If you want to get really fancy, you can even format <input> tags based on their attributes(or any tag, really). It goes like this:
div#layer input[type='checkbox'] { height:16px; width: 16px}


Was This Post Helpful? 0
  • +
  • -

Page 1 of 1