CSS baseline for forms


/ Published in: CSS
Save to your folder(s)



Copy this code and paste it in your HTML
  1. /***************************BASE FORMS CSS***************************/
  2. select, input, button, textarea {
  3. font: 100% Verdana, Lucida, Helvetica, Arial, sans-serif;
  4. font-size: 100%;
  5. font-family: Verdana, Lucida, Helvetica, Arial, sans-serif;
  6. font-weight: normal;
  7. vertical-align: baseline;
  8. margin: 2px 2px 10px 0;
  9. padding: 4px 3px;
  10. }
  11.  
  12. input, button, textarea {
  13. border: 1px solid #bbb;
  14. outline: 0;
  15. background: #F9F9F9;
  16. background: linear-gradient(center top, #f0f0f0, #ffffff) repeat scroll 0 0 #ffffff;
  17. background: -moz-linear-gradient(center top, #f0f0f0, #ffffff) repeat scroll 0 0 #ffffff;
  18. background: -webkit-gradient(linear, left top, left 25, from(#F9F9F9), to(#ffffff));
  19. }
  20.  
  21. select {
  22. padding: 0;
  23. }
  24.  
  25. /*
  26.  * laying down a base style for all buttons
  27.  * inspired by GOOGLE buttons:
  28.  */
  29. input[type="submit"], input[type="reset"], button {
  30. -moz-border-radius: 3px;
  31. -webkit-border-radius: 3px;
  32. border-radius: 3px;
  33. background: #F3F3F3;
  34. background: linear-gradient(center top , #f9f9f9, #e2e2e2) repeat scroll 0 0 #f9f9f9;
  35. background: -moz-linear-gradient(center top , #f9f9f9, #e2e2e2) repeat scroll 0 0 #f9f9f9;
  36. background: -webkit-gradient(linear, left top, left 25, from(#f9f9f9), to(#e2e2e2));
  37. cursor: pointer;
  38. margin: 0 8px 2px 0;
  39. outline: medium none;
  40. padding: 3px 6px;
  41. text-align: center;
  42. vertical-align: middle;
  43. white-space: nowrap;
  44. }
  45.  
  46. input[type="file"] {
  47. }
  48.  
  49. input:hover, textarea:hover,
  50. input:focus, textarea:focus {
  51. border-color: #c9c9c9;
  52. background-color: #fff;
  53. background: #fff;
  54. box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
  55. -moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
  56. -webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
  57. }
  58.  
  59. input[type="submit"]:focus, button:focus,
  60. input[type="submit"]:hover, button:hover {
  61. background: #e9e9e9;
  62. background: linear-gradient(center top , #f9f9f9, #e9e9e9) repeat scroll 0 0 #f9f9f9;
  63. background: -moz-linear-gradient(center top , #f9f9f9, #e9e9e9) repeat scroll 0 0 #f9f9f9;
  64. background: -webkit-gradient(linear, left top, left 25, from(#f9f9f9), to(#e9e9e9));
  65. }
  66.  
  67. form legend {
  68. background-color: transparent;
  69. border: medium none;
  70. display: block;
  71. font-size: 95%;
  72. font-weight: bold;
  73. line-height: 150%;
  74. margin: 0;
  75. padding: 0 0 0.5em;
  76. }
  77.  
  78. form label {
  79. line-height: 1.5em;
  80. margin: 1em 0;
  81. padding: 0 0 1em;
  82. }
  83.  
  84. fieldset {
  85. line-height: 1.5em;
  86. margin: 1em 0;
  87. padding: 0 1em 1em;
  88. width: auto;
  89. }
  90. /***************************END BASE FORMS CSS***************************/

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.