SHARE
TWEET

Untitled

a guest Oct 21st, 2019 87 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. form {
  2.     /* Just to center the form on the page */
  3.     margin: 0 auto;
  4.     width: 400px;
  5.     /* To see the outline of the form */
  6.     padding: 1em;
  7.     border: 1px solid #CCC;
  8.     border-radius: 1em;
  9. }
  10. form div + div {
  11.     margin-top: 1em;
  12. }
  13. label {
  14.     /* To make sure that all labels have the same size and are properly aligned */
  15.     display: inline-block;
  16.     width: 90px;
  17.     text-align: center;
  18. }
  19. input, textarea {
  20.     text-align: center;
  21.     /* To make sure that all text fields have the same font settings By default, textareas have a monospace font */
  22.     font: 1em sans-serif;
  23.     /* To give the same size to all text fields */
  24.     width: 300px;
  25.     box-sizing: border-box; /* To harmonize the look & feel of text field border */
  26.     border: 1px solid #999;
  27. }
  28. input:focus, textarea:focus {
  29.     /* To give a little highlight on active elements */
  30.     border-color: #000;
  31. }
  32. textarea {
  33.     /* To properly align multiline text fields with their labels */
  34.     vertical-align: top;
  35.     /* To give enough room to type some text */
  36.     height: 5em;
  37. }
  38. .button {
  39.     /* To position the buttons to the same position of the text fields */
  40.     padding-left: 90px;
  41.     /* same size as the label elements */
  42. }
  43. button {
  44.     /* This extra margin represent roughly the same space as the space between the labels and their text fields */
  45.     margin-left: .5em;
  46. }
  47. p{
  48.     color: red;
  49. }
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top