5 Our form styles include basic resets for text fields, select menus, and so on, along with some of our own custom components.
11 - Checkboxes and radio buttons
13 - Progress bars and meters
16 /// @Foundation.settings
18 // Basic form variables
19 $form-fontsize: 1rem !default;
20 $form-padding: 0.5rem !default;
23 $input-color: #000 !default;
24 $input-color-hover: $input-color !default;
25 $input-color-focus: $input-color !default;
26 $input-background: #fff !default;
27 $input-background-hover: $input-background !default;
28 $input-background-focus: $input-background !default;
29 $input-background-disabled: smartscale($input-background) !default;
30 $input-border: 1px solid #ccc !default;
31 $input-border-hover: 1px solid #bbb !default;
32 $input-border-focus: 1px solid #999 !default;
33 $input-cursor-disabled: not-allowed !default;
36 $select-color: #000 !default;
37 $select-background: #fafafa !default;
38 $select-background-hover: smartscale($select-background, 4%) !default;
39 $select-arrow: true !default;
40 $select-arrow-color: $select-color !default;
43 $form-label-fontsize: 0.9rem !default;
44 $form-label-margin: 0.5rem !default;
45 $form-label-color: #333 !default;
48 $inlinelabel-color: #333 !default;
49 $inlinelabel-background: #eee !default;
50 $inlinelabel-border: $input-border !default;
53 $slider-background: #ddd !default;
54 $slider-height: 1rem !default;
55 $slider-radius: 0px !default;
56 $slider-thumb-height: 1.5rem !default;
57 $slider-thumb-color: $primary-color !default;
58 $slider-thumb-radius: 0px !default;
61 $meter-height: 1.5rem !default;
62 $meter-background: #ccc !default;
63 $meter-fill: $primary-color !default;
64 $meter-fill-high: $success-color !default;
65 $meter-fill-medium: #e7cf00 !default;
66 $meter-fill-low: $alert-color !default;
67 $meter-radius: 0 !default;
70 // Disable OS-level styles
71 @mixin no-appearance {
72 -webkit-appearance: none;
73 -moz-appearance: none;
77 // - - - - - - - - - - - - - - - - - - - - - - - - -
78 #{$text-input-selectors} {
79 $top-padding: get-side($form-padding, top);
80 $bottom-padding: get-side($form-padding, bottom);
81 $height: ($form-fontsize * 1.4) + $top-padding + $bottom-padding;
83 @include no-appearance;
87 padding: $form-padding;
88 margin: 0 0 $global-padding 0;
89 border: $input-border;
91 background: $input-background;
93 font-size: $form-fontsize;
94 -webkit-font-smoothing: antialiased;
95 vertical-align: middle;
98 border: $input-border-hover;
99 background: $input-background-hover;
100 color: $input-color-hover;
104 border: $input-border-focus;
105 background: $input-background-focus;
106 color: $input-color-focus;
110 margin-top: $form-label-margin;
114 // Override the content-box declaration set by Normalize
115 input[type="search"] {
116 box-sizing: border-box;
124 fieldset[disabled] & {
125 cursor: $input-cursor-disabled;
128 background-color: $input-background-disabled;
134 // - - - - - - - - - - - - - - - - - - - - - - - - -
137 font-size: $form-label-fontsize;
138 margin-bottom: $form-label-margin;
139 color: $form-label-color;
141 > input, > textarea {
142 margin-top: $form-label-margin;
146 // Checkbox/radio buttons
147 // - - - - - - - - - - - - - - - - - - - - - - - - -
148 input[type="checkbox"], input[type="radio"] {
152 // Input inside of a label
154 margin-right: $form-padding * 0.5;
157 // Input next to a label
159 display: inline-block;
160 margin-left: $form-padding;
161 margin-right: $form-padding * 2;
163 vertical-align: baseline;
168 // Inline labels allow you to prefix or postfix special labels to inputs
169 // - - - - - - - - - - - - - - - - - - - - - - - - -
172 flex-flow: row nowrap;
173 align-items: stretch;
174 margin-bottom: $global-padding;
176 // Imitates the top margin on normal inputs
178 margin-top: $form-label-margin;
181 // Inputs stretch all the way out
187 // Inline labels and buttons shrink
190 background: $inlinelabel-background;
191 color: $inlinelabel-color;
192 border: $inlinelabel-border;
193 padding: 0 $form-padding;
197 &:first-child { border-right: 0; }
198 &:last-child { border-left: 0; }
200 // Buttons also shrink
203 > input[type="button"],
204 > input[type="submit"] {
216 // - - - - - - - - - - - - - - - - - - - - - - - - -
224 // - - - - - - - - - - - - - - - - - - - - - - - - -
226 $top-padding: get-side($form-padding, top);
227 $bottom-padding: get-side($form-padding, bottom);
228 $height: ($form-fontsize * 1.4) + $top-padding + $bottom-padding;
229 $color: isitlight($select-background);
231 @include no-appearance;
235 padding: $form-padding;
236 margin: 0 0 $global-padding 0;
237 font-size: $form-fontsize;
238 color: $select-color;
240 border: $input-border;
243 background: $select-background url(image-triangle($select-arrow-color)) right 10px center no-repeat;
244 background-size: 8px 8px;
245 padding-right: rem-calc(18px) + $form-padding;
248 background-color: $select-background
252 background-color: $select-background-hover;
259 // Remove the dropdown arrow added in IE10/11
266 // - - - - - - - - - - - - - - - - - - - - - - - - -
267 input[type="range"] {
268 $margin: ($slider-thumb-height - $slider-height) / 2;
270 @include no-appearance;
276 margin-bottom: $margin;
280 @if hasvalue($slider-radius) {
281 border-radius: $slider-radius;
289 &::-webkit-slider-runnable-track {
290 height: $slider-height;
291 background: $slider-background;
293 &::-webkit-slider-thumb {
294 -webkit-appearance: none;
295 background: $slider-thumb-color;
296 width: $slider-thumb-height;
297 height: $slider-thumb-height;
298 margin-top: -$margin;
299 @if hasvalue($slider-thumb-radius) {
300 border-radius: $slider-thumb-radius;
304 &::-moz-range-track {
305 -moz-appearance: none;
306 height: $slider-height;
309 &::-moz-range-thumb {
310 -moz-appearance: none;
311 background: $slider-thumb-color;
312 width: $slider-thumb-height;
313 height: $slider-thumb-height;
314 margin-top: -$margin;
315 @if hasvalue($slider-thumb-radius) {
316 border-radius: $slider-thumb-radius;
321 height: $slider-height;
322 background: $slider-background;
326 border-top: $margin solid $body-background;
327 border-bottom: $margin solid $body-background;
330 background: $slider-thumb-color;
331 width: $slider-thumb-height;
332 height: $slider-thumb-height;
334 @if hasvalue($slider-thumb-radius) {
335 border-radius: $slider-thumb-radius;
338 &::-ms-fill-lower, &::-ms-fill-upper {
339 background: $slider-background;
343 line-height: $slider-thumb-height;
344 vertical-align: middle;
349 // - - - - - - - - - - - - - - - - - - - - - - - - -
350 input[type="number"] {
351 &::-webkit-inner-spin-button {
354 &::-webkit-outer-spin-button {
355 -webkit-appearance: none;
356 background: $primary-color;
360 // Progress and meter
361 // - - - - - - - - - - - - - - - - - - - - - - - - -
363 @include no-appearance;
366 height: $meter-height;
369 @if hasvalue($meter-radius) {
370 border-radius: $meter-radius;
374 background: $meter-background;
379 &::-webkit-progress-bar {
380 background: $meter-background;
381 @if hasvalue($meter-radius) {
382 border-radius: $meter-radius;
385 &::-webkit-progress-value {
386 background: $meter-fill;
387 @if hasvalue($meter-radius) {
388 border-radius: $meter-radius;
391 &::-moz-progress-bar {
392 background: $meter-fill;
393 @if hasvalue($meter-radius) {
394 border-radius: $meter-radius;
398 @each $name, $color in (high: $meter-fill-high, medium: $meter-fill-medium, low: $meter-fill-low) {
400 &::-webkit-progress-value {
403 &::-moz-progress-bar {
411 &::-webkit-meter-bar {
412 background: $meter-background;
413 @if hasvalue($meter-radius) {
414 border-radius: $meter-radius;
417 &::-webkit-meter-inner-element {
418 @if hasvalue($meter-radius) {
419 border-radius: $meter-radius;
422 &::-webkit-meter-optimum-value {
423 background: $meter-fill-high;
424 @if hasvalue($meter-radius) {
425 border-radius: $meter-radius;
428 &::-webkit-meter-suboptimum-value {
429 background: $meter-fill-medium;
430 @if hasvalue($meter-radius) {
431 border-radius: $meter-radius;
434 &::-webkit-meter-even-less-good-value {
435 background: $meter-fill-low;
436 @if hasvalue($meter-radius) {
437 border-radius: $meter-radius;
442 background: $meter-background;
444 background: $primary-color;
445 @if hasvalue($meter-radius) {
446 border-radius: $meter-radius;
449 &:-moz-meter-optimum::-moz-meter-bar {
450 background: $meter-fill-high;
452 &:-moz-meter-sub-optimum::-moz-meter-bar {
453 background: $meter-fill-medium;
455 &:-moz-meter-sub-sub-optimum::-moz-meter-bar {
456 background: $meter-fill-low;