pico/scss/content/_form.scss

/**
 * Form elements
 */


// Reboot
// Based on normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
// ––––––––––––––––––––

// 1. Change the font styles in all browsers.
// 2. Remove the margin in Firefox and Safari.
input,
optgroup,
select,
textarea {
  margin: 0; // 2
  font-family: inherit; // 1
  font-size: 1rem; // 1
  line-height: $line-height; // 1
}

// Show the overflow in IE.
input {
  overflow: visible;
}

// Remove the inheritance of text transform in Edge, Firefox, and IE.
select {
  text-transform: none;
}

// 1. Correct the text wrapping in Edge and IE.
// 2. Correct the color inheritance from `fieldset` elements in IE.
// 3. Remove the padding so developers are not caught out when they zero out
// `fieldset` elements in all browsers.
legend {
  display: table; // 1
  max-width: 100%; // 1
  padding: 0; // 3
  color: inherit; // 2
  white-space: normal; // 1
}

// Remove the default vertical scrollbar in IE 10+.
textarea {
  overflow: auto;
}

// Remove the padding in IE 10.
[type="checkbox"],
[type="radio"] {
  padding: 0;
}

// Correct the cursor style of increment and decrement buttons in Chrome.
[type="number"]::-webkit-inner-spin-button {
  height: auto;
}

// 1. Correct the odd appearance in Chrome and Safari.
// 2. Correct the outline style in Safari.
[type="search"] {
  -webkit-appearance: textfield; // 1
  outline-offset: -2px; // 2
}

// Remove the inner padding in Chrome and Safari on macOS.
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

// 1. Correct the inability to style clickable types in iOS and Safari.
// 2. Change font properties to `inherit` in Safari.
::-webkit-file-upload-button {
  -webkit-appearance: button; // 1
  font: inherit; // 2
}


// Pico
// ––––––––––––––––––––

// Fieldset
fieldset {
  margin: 0;
  margin-bottom: $spacing-typography;
  padding: 0;
  border: 0;
}

// Layout
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea,
form small {
  display: block;
  width: 100%;
}

// Spacing beteen label and input
$spacing-label-input: $spacing-typography/12;

// Label & legend
label,
fieldset legend {
  display: block;
  margin-bottom: $spacing-label-input;
  vertical-align: middle;
}

// Inputs (Commons styles)
input,
select,
textarea {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 1px solid var(--input-border);
  border-radius: $round;
  outline: none;
  background-color: var(--input-background);
  color: var(--text);
  font-weight: normal;
  vertical-align: middle;
  transition:
    background-color $transition,
    border-color $transition,
    color $transition,
    border-color $transition,
    box-shadow $transition;

  &::placeholder {
    color: var(--muted-text);
    opacity: 1;
  }

  &:active,
  &:focus {
    border-color: var(--primary);
  }

  &:focus  {
    box-shadow: 0 0 0 0.2rem var(--primary-focus);
  }

  &[readonly],
  &[disabled] {
    border-color: var(--muted-border);
    box-shadow: none;

    & ~ label {
      color: var(--muted-text);
    }
  }

  &[disabled] {
    background-color: var(--muted-background);
    opacity: .5;
  }

  // Undo the Firefox inner focus ring
  &:focus:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 #000;
  }
}

// Text, Select & Textarea
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
  margin-bottom: $spacing-typography;
  padding: $spacing-input-button;

  @if $enable-input-states {

    // Validation states
    &[invalid]:not(:focus),
    &[valid]:not(:focus) {
      padding-right: 2rem;
      background-position: center right .75rem;
      background-repeat: no-repeat;
      background-size: 1rem auto;
    }

    &[invalid]:not(:focus) {
      // Source: https://feathericons.com/
      $invalid-icon-color: "b94646"; // Without '#' !important
      border-bottom: 1px solid var(--invalid);
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23" + $invalid-icon-color + "' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
    }

    &[valid]:not(:focus) {
      // Source: https://feathericons.com/
      $valid-icon-color: "288a6a"; // Without '#' !important
      border-bottom: 1px solid var(--valid);
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23" + $valid-icon-color + "' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
    }
  }
}

// Color
input[type="color"] {
  height: calc(3rem + 2px); // HACK
}

// Select
select {
  // Unstyle the caret on `<select>`s in IE10+.
  &::-ms-expand {
    border: 0;
    background-color: transparent;
  }
  &:not([multiple]) {
    // Source: https://feathericons.com/
    $caret-icon-color: "808080"; // Without '#' !important
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23" + $caret-icon-color + "' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-position: center right .75rem;
    background-repeat: no-repeat;
    background-size: 1rem auto;
  }
}

// Helper
form small {
  color: var(--muted-text);
}

input + small {
  margin-top: -$spacing-typography/1.5;
  margin-bottom: $spacing-typography;
}

// Styles for Input inside a label
label {

  & > input:not([type="checkbox"]):not([type="radio"]),
  & > select,
  & > textarea {
    margin-top: $spacing-label-input;
  }
}