form.css

/* FORMS */

/* Simple form layouts.
 *
 * Use the "vertical" class to make the labels sit above the input fields:
 *
 *     Label
 *     [        ]
 *
 *     [x] Checkbox
 *
 *     [Submit]
 *
 *
 * Use the "horizontal" class if you want a more "horizontal" layout:
 *
 *     Label    [       ]
 *
 *     Another  [       ]
 *
 *              [x] Checkbox
 *
 *              [Submit]
 *
 * You need to explicitly add one of the layout classes to make it easier to use
 * forms as simple UI elements.
 */


/* GENERIC STYLES */
input[type="text"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime-local"],
input[type="range"],
input[type="number"],
textarea,
select {
  font: 1em/100% sans-serif;          /* Use  sans-serif font with the default font size. */
}

textarea,
button:not(.link),
select,
input:not([type="checkbox"]):not([type="file"]):not([type="image"]):not([type="radio"]):not([type="range"]) {
  padding: .6em;                       /* Chrome adds almost no padding. */
  border: 1px solid #bbb;
  border-radius: 3px;
}

textarea {
  width: 100%;                         /* Use entire width of container. */
  height: 10rem;                       /* A reasonable default height for most purposes. */
  line-height: 130%;                   /* Reduce line-height since we set a sans-serif font. */
}

button:not(.link), input[type="submit"]:not(.link) {
  color: #000;                         /* Bit more contrast. */
  cursor: pointer;                     /* Clearer it's clickable. */
  margin-left: .5em;                   /* Bit of margin generally looks better. */
  padding: .6em 1.5em;                 /* More padding for left/right. */
  background-color: #f6f5f4;           /* Background gets reset when border is set; defaults from Firefox. */
  background: linear-gradient(#f6f5f4, #edebe9);
  border: 1px outset #e9e9e9;          /* More or less the same as the Firefox border. */
  border-radius: 3px;
  border-top-color: #ccc;
  border-left-color: #ccc;
}

select {
  background-color: inherit;           /* No need for just selects to be grey. */
}

input:not(.link):focus,
button:not(.link):focus,
textarea:focus,
select:focus {                         /* Firefox removes this once you start styling */
  outline: 1px solid #00f;
  box-shadow: 0 0 .2em #00f;
  color: #000;                         /* Increase contrast a bit. */
  cursor: pointer;                     /* Clearer that you can click this. */
}

button:not(.link):hover,               /* Bit darker on hover. */
input[type="submit"]:not(.link):hover {
  background-color: #f0f0f0;
  background: linear-gradient(#f0f0f0, #d0cecc);
}
button:not(.link):active,              /* Reverse when active/clicking. */
input[type="submit"]:not(.link):active {
  background-color: #d0cecc;
  background: linear-gradient(#d0cecc, #f0f0f0);
  border-style: inset;
}

form > strong, fieldset > strong {     /* Header. */
  display: inline-block;
  margin-top: .5em;
}

form span {
  margin-left: .2em;                   /* Help text or error; so it doesn't sit flush with the input. */
}

fieldset {
  border: 1px solid /*bordercolor*/#aaa; /* More modern-looking border instead of inset or 2px. */
}

/* VERTICAL FORM */

/* TODO: optgroup? */
/* https://github.com/twbs/bootstrap/blob/master/dist/css/bootstrap.css */
.vertical input[type="text"],
.vertical input[type="search"],
.vertical input[type="tel"],
.vertical input[type="url"],
.vertical input[type="email"],
.vertical input[type="password"],
.vertical input[type="date"],
.vertical input[type="month"],
.vertical input[type="week"],
.vertical input[type="time"],
.vertical input[type="datetime-local"],
.vertical input[type="range"],
.vertical input[type="number"],
.vertical textarea,
.vertical select {
  display: block;                      /* One input per line. */
  min-width: 20rem;                    /* Roughly half the page. */
}

.vertical input[type="number"] {
  min-width: 10rem;                    /* Numbers don't need to be so wide. */
  width: 10rem;
}

.vertical label {
  display: block;                      /* One label per line. */
  margin-top: .5em;                    /* Clear from the previous input. */
}

/* HORIZONTAL FORM */
form.horizontal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

form.horizontal label {
  width: 30%;
}

form.horizontal > div {
  width: 65%;
  margin-bottom: 1em;
}

form.horizontal input[type=submit],
form.horizontal button[type=submit] {
  margin-left: 35%;                    /* Align submit buttons with inputs. */
}

form.horizontal span {                 /* Help text, put below the input. */
  display: block;
  margin-left: .2em;
}