@ou-imdt/css/src/native/input-textarea-select.css

The IMDT CSS library styles native elements with light, extendable CSS. It is developed for Interactive Media Developers at the Open University.

:root,
:host {
  /* Inputs */
  --input-weight: normal;
  --input-max-width: 100%;
  --input-display: inline-block;
  --input-padding: 0.1rem 0.3rem;
  --input-border: 2px solid #7570A7;
  --input-required-icon: "*";
  --input-disabled-opacity: 1;
  --input-disabled-bg: #E6E6E6;
  --input-disabled-fg: #999999;
  --input-disabled-border: 2px solid #999999;
  --input-radius: 3px;
  --input-outline: 2px;

  --input-focus-shadow: none;
  --input-focus-border: 2px solid var(--accent);

  --input-focus-visible-shadow: none;
  --input-focus-visible-border: 2px solid #000000;
  --input-text-cursor: text;


  /* Textarea */
  --textarea-border: var(--input-border);
  --textarea-padding: var(--input-padding);
  --textarea-width: 100%;

  /* Select */
  --select-padding: 0.3rem 0.2rem;

}

input {
  font-weight: var(--input-weight);
  position: relative;
  cursor: var(--interactive-cursor);
  display: var(--input-display);
  background-color: var(--bg1);
  color: var(--fg1);
  border: var(--input-border);
  border-radius: var(--input-radius);
  min-height: var(--wcag-min-target);
  min-width: var(--wcag-min-target);
  padding: var(--input-padding);
  outline: var(--input-outline);
  max-width: var(--input-max-width);
}

input:is([type="text"], [type="url"], [type="password"], [type="number"], [type="email"], [type="date"], [type="datetime-local"], [type="search"], [type="tel"], [type="time"]) {
  cursor: var(--input-text-cursor);
}

input:not([type="image"]):not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="image"]):not([type="submit"])::not([type="reset"]):not([type="color"]) {
  height: 2rem;
}

input[type="color"] {
  padding: 0;
}

input:focus:not([type="radio"]):not([type="checkbox"]) {
  border: var(--input-focus-border);
  box-shadow: var(--input-focus-shadow);
}

input:not([type="radio"]):not([type="checkbox"]):focus-visible {
  border: var(--input-focus-visible-border);
  box-shadow: var(--input-focus-visible-shadow);
}

input:disabled,
input[aria-disabled="true"] {
  opacity: var(--input-disabled-opacity);
  background: var(--input-disabled-bg);
  color: var(--input-disabled-fg);
  border: var(--input-disabled-border);
  pointer-events: none;
}

/* Textarea */
textarea {
  cursor: var(--input-text-cursor);
  display: block;
  background: var(--bg1);
  color: var(--fg1);
  border: var(--textarea-border);
  border-radius: var(--input-radius);
  min-height: var(--wcag-min-target);
  min-width: var(--wcag-min-target);
  padding: var(--textarea-padding);
  width: var(--textarea-width);
}

textarea:focus {
  border: var(--input-focus-border);
  box-shadow: var(--input-focus-shadow);
}

textarea:not([type="radio"]):focus-visible {
  border: var(--input-focus-visible-border);
  box-shadow: var(--input-focus-visible-shadow);
}

textarea:disabled,
textarea[aria-disabled="true"] {
  opacity: var(--input-disabled-opacity);
  background: var(--input-disabled-bg);
  color: var(--input-disabled-fg);
  pointer-events: none;
}

/* Select */

select {
  font-weight: var(--input-weight);
  position: relative;
  cursor: var(--interactive-cursor);
  display: block;
  background-color: var(--bg1);
  color: var(--fg1);
  border: var(--input-border);
  border-radius: var(--input-radius);
  min-height: var(--a11y-target);
  min-width: var(--a11y-target);
  padding: var(--select-padding);
}

select:not([type="radio"]):focus-visible {
  border: var(--input-focus-visible-border);
  box-shadow: var(--input-focus-visible-shadow);
}

select:focus {
  border: var(--input-focus-border);
  box-shadow: var(--input-focus-shadow);
}

select:disabled,
select[aria-disabled="true"] {
  opacity: var(--input-disabled-opacity, 0.7);
  background: var(--input-disabled-bg);
  color: var(--input-disabled-fg);
  pointer-events: none;
}