advanced code snippet search

Posted By

n00ge on 05/22/07


Tagged

css forms


Versions (?)

Who likes this?

23 people have marked this snippet as a favorite

ggb2g
d4rk
llbbl
joseluis
Quizosde
vali29
stoker
stavelin
gAmUssA
Tamedo
atma
angstmann
monapdx
tmbrenneke
jocko21
leecsargent
karp13
bobbym245
sumit270
satsuma
michellebracken
dajocko
ringo380


Basic Form CSS

 / Published in: CSS
 

URL: http://www.creativeruin.com/basicform/

Basic form CSS (for use with the HTML form snippets I also posted).

*updated on 2/2/08: removed some unnecessary floats and separated layout styles from presentation styles for easier management.

Expand | Embed | Plain Text 
  1. /* FORM STYLES */
  2. form {font:1em/1 Verdana,Geneva,Kalimati,sans-serif; color:#333;}
  3. fieldset {border:1px solid #999;}
  4. fieldset fieldset {border:none;}
  5. fieldset fieldset legend {font:bold 1em/1 Verdana,Geneva,Kalimati,sans-serif; color:#000;}
  6. legend {font:1.5em/1 "Trebuchet MS",Helvetica,Jamrul,sans-serif; color:#000;}
  7. .textfield input, .file input, .dropdown select, .textarea textarea, div input.innertextfield {font:1em/1 Verdana,Geneva,Kalimati,sans-serif; color:#000; border:1px solid #999; background:#ececec;}
  8. .textfield input:hover, .file input:hover, .dropdown select:hover, .textarea textarea:hover, div input.innertextfield:hover {border-color:orange;}
  9. .textfield input:focus, .file input:focus, .dropdown select:focus, .textarea textarea:focus, div input.innertextfield:hover {border-color:#333;}
  10. .textfield input:active, .file input:active, .dropdown select:active, .textarea textarea:active, div input.innertextfield:active {border-color:#333;}
  11. .textfield input:focus:hover, .file input:focus:hover, .dropdown select:focus:hover, .textarea textarea:focus:hover, div input.innertextfield:focus:hover {border-color:orange;}
  12. .checkbox input, .radio input {border:none; background:transparent;}
  13. button {font:1.2em/1 Verdana,Geneva,Kalimati,sans-serif; border:1px solid #666; background:#666; color:#fff;}
  14. button:hover {border-color:#000; color:orange;}
  15. optgroup {font:bold 1em/1 Verdana,Geneva,Kalimati,sans-serif;}
  16. option {font:1em/1 Verdana,Geneva,Kalimati,sans-serif;}
  17.  
  18.  
  19. /* FORM LAYOUT */
  20. form {}
  21. fieldset {margin-bottom:3em; padding:10px;}
  22. fieldset fieldset {padding:0;}
  23. legend {margin-bottom:1em;}
  24. .textfield, .textarea, .file, .dropdown, .radio, .checkbox, .buttons, fieldset fieldset {margin-bottom:1em;}
  25. .textfield input, .file input, .dropdown select, .textarea textarea, input.innertextfield {padding:2px 5px;}
  26. .textfield input, .file input, .dropdown select, .textarea textarea {width:250px;}
  27. textarea {height:6em;}
  28. .textfield input, .file input, .dropdown select, .textarea textarea {display:block; margin:0.1em 0 0 0;}
  29. .checkbox input, .radio input {margin-right:5px;}
  30. div input.innertextfield {display:inline; margin-right:0;}
  31. .buttons {}
  32. button {padding:4px;}
  33. optgroup {}
  34. option {padding:1px 3px;}

Report this snippet  

You need to login to post a comment.