forms.css 2.5KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182
  1. /* --------------------------------------------------------------
  2. forms.css
  3. * Sets up some default styling for forms
  4. * Gives you classes to enhance your forms
  5. Usage:
  6. * For text fields, use class .title or .text
  7. * For inline forms, use .inline (even when using columns)
  8. -------------------------------------------------------------- */
  9. /*
  10. A special hack is included for IE8 since it does not apply padding
  11. correctly on fieldsets
  12. */
  13. label { font-weight: bold; }
  14. fieldset { padding:0 1.4em 1.4em 1.4em; margin: 0 0 1.5em 0; border: 1px solid #ccc; }
  15. legend { font-weight: bold; font-size:1.2em; margin-top:-0.2em; margin-bottom:1em; }
  16. fieldset, #IE8#HACK { padding-top:1.4em; }
  17. legend, #IE8#HACK { margin-top:0; margin-bottom:0; }
  18. /* Form fields
  19. -------------------------------------------------------------- */
  20. /*
  21. Attribute selectors are used to differentiate the different types
  22. of input elements, but to support old browsers, you will have to
  23. add classes for each one. ".title" simply creates a large text
  24. field, this is purely for looks.
  25. */
  26. input[type=text], input[type=password],
  27. input.text, input.title,
  28. textarea {
  29. background-color:#fff;
  30. border:1px solid #bbb;
  31. }
  32. input[type=text]:focus, input[type=password]:focus,
  33. input.text:focus, input.title:focus,
  34. textarea:focus {
  35. border-color:#666;
  36. }
  37. select { background-color:#fff; border-width:1px; border-style:solid; }
  38. input[type=text], input[type=password],
  39. input.text, input.title,
  40. textarea, select {
  41. margin:0.5em 0;
  42. }
  43. input.text,
  44. input.title { width: 300px; padding:5px; }
  45. input.title { font-size:1.5em; }
  46. textarea { width: 390px; height: 250px; padding:5px; }
  47. /*
  48. This is to be used on forms where a variety of elements are
  49. placed side-by-side. Use the p tag to denote a line.
  50. */
  51. form.inline { line-height:3; }
  52. form.inline p { margin-bottom:0; }
  53. /* Success, info, notice and error/alert boxes
  54. -------------------------------------------------------------- */
  55. .error,
  56. .alert,
  57. .notice,
  58. .success,
  59. .info { padding: 0.8em; margin-bottom: 1em; border: 2px solid #ddd; }
  60. .error, .alert { background: #fbe3e4; color: #8a1f11; border-color: #fbc2c4; }
  61. .notice { background: #fff6bf; color: #514721; border-color: #ffd324; }
  62. .success { background: #e6efc2; color: #264409; border-color: #c6d880; }
  63. .info { background: #d5edf8; color: #205791; border-color: #92cae4; }
  64. .error a, .alert a { color: #8a1f11; }
  65. .notice a { color: #514721; }
  66. .success a { color: #264409; }
  67. .info a { color: #205791; }