Pastebin launched a little side project called VERYVIRAL.com, check it out ;-) Want more features on Pastebin? Sign Up, it's FREE!
Guest

jQuery Form CSS

By: a guest on Feb 21st, 2012  |  syntax: CSS  |  size: 4.63 KB  |  views: 3,764  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. /* =Custom Contact Form with jQuery
  2. ----------------------------------------------- */
  3.  
  4. /* Add curved borders to various elements */
  5. #contactForm, .statusMessage, input[type="submit"], input[type="button"] {
  6.   -moz-border-radius: 10px;
  7.   -webkit-border-radius: 10px;  
  8.   border-radius: 10px;
  9. }
  10.  
  11. /* Style for the contact form and status messages */
  12. #contactForm, .statusMessage {
  13.   color: #666;
  14.   background-color: #ebedf2;
  15.   background: -webkit-gradient( linear, left bottom, left top, color-stop(0,#dfe1e5), color-stop(1, #ebedf2) );
  16.   background: -moz-linear-gradient( center bottom, #dfe1e5 0%, #ebedf2 100% );  
  17.   border: 1px solid #aaa;
  18.   -moz-box-shadow: 0 0 1em rgba(0, 0, 0, .5);
  19.   -webkit-box-shadow: 0 0 1em rgba(0, 0, 0, .5);
  20.   box-shadow: 0 0 1em rgba(0, 0, 0, .5);
  21.   opacity: .95;
  22. }
  23.  
  24. /* The form dimensions */
  25. #contactForm {
  26.   width: 40em;
  27.   height: 41em;
  28.   padding: 0 1.5em 1.5em 1.5em;
  29.   margin: 0 auto;
  30. }
  31.  
  32. /* Position the form in the middle of the window (if JavaScript is enabled) */
  33. #contactForm.positioned {
  34.   position: fixed;
  35.   top: 0;
  36.   bottom: 0;
  37.   left: 0;
  38.   right: 0;
  39.   margin-top: auto;
  40.   margin-bottom: auto;
  41. }
  42.  
  43.  
  44. /* The header at the top of the form */
  45. #contactForm h2 {
  46.   font-size: 2em;
  47.   font-style: italic;
  48.   letter-spacing: .05em;
  49.   margin: 0 0 1em -.75em;
  50.   padding: 1em;
  51.   width: 19.5em;  
  52.   color: #aeb6aa;
  53.   background: #dfe0e5 url('images/stamp.jpg') no-repeat 15em -3em; /* http://morguefile.com/archive/display/606433 */
  54.   border-bottom: 1px solid #aaa;
  55.   -moz-border-radius: 10px 10px 0 0;
  56.   -webkit-border-radius: 10px 10px 0 0;  
  57.   border-radius: 10px 10px 0 0;
  58. }
  59.  
  60. /* Give form elements consistent margin, padding and line height */
  61. #contactForm ul {
  62.   list-style: none;
  63.   margin: 0;
  64.   padding: 0;
  65. }
  66.  
  67. #contactForm ul li {
  68.   margin: .9em 0 0 0;
  69.   padding: 0;
  70. }
  71.  
  72. #contactForm input, #contactForm label {
  73.   line-height: 1em;
  74. }
  75.  
  76. /* The field labels */
  77. #contactForm label {
  78.   display: block;
  79.   float: left;
  80.   clear: left;
  81.   text-align: right;
  82.   width: 28%;
  83.   padding: .4em 0 .0 0;
  84.   margin: .15em .5em 0 0;
  85.   font-weight: bold;
  86. }
  87.  
  88. /* The fields */
  89. #contactForm input, textarea , select {
  90.   display: block;
  91.   margin: 0;
  92.   padding: .4em;
  93.   width: 67%;
  94.   font-family: "Georgia", serif;
  95.   font-size: 1em;
  96.   border: 1px solid #aaa;
  97.   -moz-border-radius: 5px;
  98.   -webkit-border-radius: 5px;    
  99.   border-radius: 5px;
  100.   -moz-box-shadow: rgba(0,0,0,.2) 0 1px 4px inset;
  101.   -webkit-box-shadow: rgba(0,0,0,.2) 0 1px 4px inset;
  102.   box-shadow: rgba(0,0,0,.2) 0 1px 4px inset;
  103.   background: #fff;
  104. }
  105.  
  106. #contactForm textarea {
  107.   height: 13em;
  108.   line-height: 1.5em;
  109.   resize: none;
  110. }
  111.  
  112.  
  113. /* Place a border around focused fields, and hide the inner shadow */
  114. #contactForm *:focus {
  115.   border: 1px solid #66f;
  116.   outline: none;
  117.   box-shadow: none;
  118.   -moz-box-shadow: none;
  119.   -webkit-box-shadow: none;
  120. }
  121.  
  122. /* The Send and Cancel buttons */
  123. #contactForm input[type="submit"], #contactForm input[type="button"] {
  124.   float: right;
  125.   margin: 2em 1em 0 1em;
  126.   width: 10em;
  127.   padding: .5em;
  128.   border: 1px solid #666;
  129.   -moz-border-radius: 10px;
  130.   -webkit-border-radius: 10px;  
  131.   border-radius: 10px;
  132.   -moz-box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
  133.   -webkit-box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
  134.   box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
  135.   color: #fff;
  136.   background: #0a0;
  137.   font-size: 1em;
  138.   line-height: 1em;
  139.   font-weight: bold;
  140.   opacity: .7;
  141.   -webkit-appearance: none;
  142.   -moz-transition: opacity .5s;
  143.   -webkit-transition: opacity .5s;
  144.   -o-transition: opacity .5s;
  145.   transition: opacity .5s;
  146. }
  147.  
  148. #contactForm input[type="submit"]:hover,
  149. #contactForm input[type="submit"]:active,
  150. #contactForm input[type="button"]:hover,
  151. #contactForm input[type="button"]:active {
  152.   cursor: pointer;
  153.   opacity: 1;
  154. }
  155.  
  156. #contactForm input[type="submit"]:active, input[type="button"]:active {
  157.   color: #333;
  158.   background: #eee;
  159.   -moz-box-shadow: 0 0 .5em rgba(0, 0, 0, .8) inset;
  160.   -webkit-box-shadow: 0 0 .5em rgba(0, 0, 0, .8) inset;
  161.   box-shadow: 0 0 .5em rgba(0, 0, 0, .8) inset;
  162. }
  163.  
  164. #contactForm input[type="button"] {
  165.   background: #f33;
  166. }
  167.  
  168.  
  169. /* Some IE7 hacks and workarounds */
  170.  
  171. <!--[if lt IE 8]>
  172. /* IE7 needs the fields to be floated as well as the labels */
  173. #contactForm input, textarea {
  174.   float: right;
  175. }
  176.  
  177. #formButtons {
  178.   clear: both;
  179. }
  180.  
  181. /*
  182.   IE7 needs an ickier approach to vertical/horizontal centring with fixed positioning.
  183.   The negative margins are half the element's width/height.
  184. */
  185. #contactForm.positioned, .statusMessage {
  186.   left: 50%;
  187.   top: 50%;
  188. }
  189.  
  190. #contactForm.positioned {
  191.   margin-left: -20em;
  192.   margin-top: -16.5em;
  193. }
  194. <![endif]-->