picocss/scss/content/_form.scss

/**
 * Form elements
 */

// Reboot based on :
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.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-size: 1rem; // 1
  line-height: var(--line-height); // 1
  font-family: inherit; // 1
  letter-spacing: inherit; // 2
}

// 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 {
  max-width: 100%; // 1
  padding: 0; // 3
  color: inherit; // 2
  white-space: normal; // 1
}

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

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

// Correct the cursor style of increment and decrement buttons in Safari
::-webkit-inner-spin-button,
::-webkit-outer-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
}

// Remove the inner border and padding of focus outlines in Firefox
::-moz-focus-inner {
  padding: 0;
  border-style: none;
}

//  Remove the focus outline in Firefox
:-moz-focusring {
  outline: none;
}

// Remove the additional :invalid styles in Firefox
:-moz-ui-invalid {
  box-shadow: none;
}

// Change the inconsistent appearance in IE (opinionated)
::-ms-expand {
  display: none;
}

// Remove the border and padding in all browsers (opinionated)
[type="file"],
[type="range"] {
  padding: 0;
  border-width: 0;
}

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

// Force height for alternatives input types
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]) {
  height: calc(
    (1rem * var(--line-height)) + (var(--form-element-spacing-vertical) * 2) +
      (var(--border-width) * 2)
  );
}

// Fieldset
fieldset {
  margin: 0;
  margin-bottom: var(--spacing);
  padding: 0;
  border: 0;
}

// Label & legend
label,
fieldset legend {
  display: block;
  margin-bottom: calc(var(--spacing) * 0.25);
  font-weight: var(--form-label-font-weight, var(--font-weight));
}

// Blocks, 100%
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
  width: 100%;
}

// Reset appearance (Not Checkboxes, Radios, Range and File)
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
select,
textarea {
  appearance: none;
  padding: var(--form-element-spacing-vertical)
    var(--form-element-spacing-horizontal);
  vertical-align: middle;
}

// Commons styles
input,
select,
textarea {
  --background-color: var(--form-element-background-color);
  --border-color: var(--form-element-border-color);
  --color: var(--form-element-color);
  --box-shadow: none;
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--border-radius);
  outline: none;
  background-color: var(--background-color);
  box-shadow: var(--box-shadow);
  color: var(--color);
  font-weight: var(--font-weight);

  @if $enable-transitions {
    transition: background-color var(--transition),
      border-color var(--transition), color var(--transition),
      box-shadow var(--transition);
  }
}

// Active & Focus
input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([readonly]),
:where(select, textarea) {
  &:is(:active, :focus) {
    --background-color: var(--form-element-active-background-color);
  }
}

// Active & Focus
input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([role="switch"]):not([readonly]),
:where(select, textarea) {
  &:is(:active, :focus) {
    --border-color: var(--form-element-active-border-color);
  }
}

// Focus
input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="range"]):not([type="file"]):not([readonly]),
select,
textarea {
  &:focus {
    --box-shadow: 0 0 0 var(--outline-width) var(--form-element-focus-color);
  }
}

// Disabled
input:not([type="submit"]):not([type="button"]):not([type="reset"])[disabled],
select[disabled],
textarea[disabled],
:where([disabled]) :is(input:not([type="submit"]):not([type="button"]):not([type="reset"]), select, textarea) {
  --background-color: var(--form-element-disabled-background-color);
  --border-color: var(--form-element-disabled-border-color);
  opacity: var(--form-element-disabled-opacity);
  pointer-events: none;
}

// Aria-invalid
:where(input, select, textarea) {
  &:not([type="checkbox"]):not([type="radio"]) {
    &[aria-invalid] {
      @if $enable-important {
        padding-right: calc(
          var(--form-element-spacing-horizontal) + 1.5rem
        ) !important;
        padding-left: var(--form-element-spacing-horizontal);
        padding-inline-start: var(--form-element-spacing-horizontal) !important;
        padding-inline-end: calc(
          var(--form-element-spacing-horizontal) + 1.5rem
        ) !important;
      } 
      @else {
        padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem);
        padding-left: var(--form-element-spacing-horizontal);
        padding-inline-start: var(--form-element-spacing-horizontal);
        padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem);
      }
      background-position: center right 0.75rem;
      background-size: 1rem auto;
      background-repeat: no-repeat;
    }

    &[aria-invalid="false"] {
      background-image: var(--icon-valid);
    }

    &[aria-invalid="true"] {
      background-image: var(--icon-invalid);
    }
  }

  &[aria-invalid="false"] {
    --border-color: var(--form-element-valid-border-color);

    &:is(:active, :focus) {
      @if $enable-important {
        --border-color: var(--form-element-valid-active-border-color) !important;
        --box-shadow: 0 0 0 var(--outline-width) var(--form-element-valid-focus-color) !important;
      } 
      @else {
        --border-color: var(--form-element-valid-active-border-color);
        --box-shadow: 0 0 0 var(--outline-width) var(--form-element-valid-focus-color);
      }
    }
  }

  &[aria-invalid="true"] {
    --border-color: var(--form-element-invalid-border-color);

    &:is(:active, :focus) {
      @if $enable-important {
        --border-color: var(--form-element-invalid-active-border-color) !important;
        --box-shadow: 0 0 0 var(--outline-width) var(--form-element-invalid-focus-color) !important;
      } 
      @else {
        --border-color: var(--form-element-invalid-active-border-color);
        --box-shadow: 0 0 0 var(--outline-width) var(--form-element-invalid-focus-color);
      }
    }
  }
}

[dir="rtl"] {
  :where(input, select, textarea) {
    &:not([type="checkbox"]):not([type="radio"]) {
      &[aria-invalid],
      &[aria-invalid="true"],
      &[aria-invalid="false"] {
        background-position: center left 0.75rem;
      }
    }
  }
}

// Placeholder
input::placeholder,
input::-webkit-input-placeholder,
textarea::placeholder,
textarea::-webkit-input-placeholder,
select:invalid {
  color: var(--form-element-placeholder-color);
  opacity: 1;
}

// Margin bottom (Not Checkboxes and Radios)
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
  margin-bottom: var(--spacing);
}

// Select
select {
  // Unstyle the caret on `<select>`s in IE10+.
  &::-ms-expand {
    border: 0;
    background-color: transparent;
  }

  &:not([multiple]):not([size]) {
    padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem);
    padding-left: var(--form-element-spacing-horizontal);
    padding-inline-start: var(--form-element-spacing-horizontal);
    padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem);
    background-image: var(--icon-chevron);
    background-position: center right 0.75rem;
    background-size: 1rem auto;
    background-repeat: no-repeat;
  }
}

[dir="rtl"] {
  select {
    &:not([multiple]):not([size]) {
      background-position: center left 0.75rem;
    }
  }
}

// Helper
:where(input, select, textarea) {
  + small {
    display: block;
    width: 100%;
    margin-top: calc(var(--spacing) * -0.75);
    margin-bottom: var(--spacing);
    color: var(--muted-color);
  }
}

// Styles for Input inside a label
label {
  > :where(input, select, textarea) {
    margin-top: calc(var(--spacing) * 0.25);
  }
}