2 -------------------------------------------------- */
4 /* Force form elements to inherit font styles */
13 /* Stretch inputs/textareas to full width and add height to maintain a consistent baseline */
18 input[type="password"],
19 input[type="datetime"],
20 input[type="datetime-local"],
36 border: 1px solid rgba(0, 0, 0, .2);
38 box-shadow: 0 1px 1px rgba(255, 255, 255, .2), inset 0 1px 1px rgba(0, 0, 0, .1);
39 -webkit-appearance: none;
40 box-sizing: border-box;
43 /* Fully round search input */
50 /* Allow text area's height to grow larger than a normal input */
55 /* Style select button to look like part of the Ratchet's style */
59 background-color: #f8f8f8;
60 background-image: -webkit-linear-gradient(top, #f8f8f8 0%, #d4d4d4 100%);
61 background-image: linear-gradient(to bottom, #f8f8f8 0%, #d4d4d4 100%);
62 box-shadow: inset 0 1px 1px rgba(0, 0, 0, .1);
66 /* Input groups (cluster multiple inputs together into a single group)
67 -------------------------------------------------- */
69 /* Reset from initial form setup styles */
76 /* Remove spacing, borders, shadows and rounding since it all belongs on the .input-group not the input */
79 background-color: transparent;
81 border-bottom: 1px solid rgba(0, 0, 0, .2);
86 /* Remove bottom border on last input to avoid double bottom border */
87 .input-group input:last-child {
88 border-bottom-width: 0;
91 /* Input groups with labels
92 -------------------------------------------------- */
94 /* To use labels with input groups, wrap a label and an input in an .input-row */
97 border-bottom: 1px solid rgba(0, 0, 0, .2);
100 /* Remove bottom border on last input-row to avoid double bottom border */
101 .input-row:last-child {
102 border-bottom-width: 0;
105 /* Labels get floated left with a set percentage width */
109 padding: 11px 10px 9px 13px; /* Optimizing the baseline for mobile. */
113 /* Actual inputs float to right of labels and also have a set percentage */
114 .input-row label + input {