Custom icons for inputs

[tommy4st]

Currently, it's pretty easy to use another icon than the magnifying glass for a search input, but this always encompasses the search semantic and the round border.

I'd like to use custom icons on most other <input> elements as well, like so:

<input class="has-icon" style="--pico-icon-input: /* whatever */;" type="text">

:root {
  --pico-input-icon: /* some generic, default icon, like a pen? */;
}

input:not([type=checkbox], [type=radio], [type=range], [type=file]).has-icon {
  padding-inline-start: calc(var(--pico-form-element-spacing-horizontal) + 1.75rem);
  background-image: var(--pico-icon-input);
  background-position: center left calc(var(--pico-form-element-spacing-horizontal) + 0.125rem);
  background-size: 1rem auto;
  background-repeat: no-repeat;
}
input:not([type=checkbox], [type=radio], [type=range], [type=file]).has-icon[aria-invalid] {
  padding-inline-start: calc(var(--pico-form-element-spacing-horizontal) + 1.75rem) !important;
  background-position: center left 1.125rem, center right 0.75rem;
}
input:not([type=checkbox], [type=radio], [type=range], [type=file]).has-icon[aria-invalid=false] {
  background-image: var(--pico-icon-input), var(--pico-icon-valid);
}
input:not([type=checkbox], [type=radio], [type=range], [type=file]).has-icon[aria-invalid=true] {
  background-image: var(--pico-icon-input), var(--pico-icon-invalid);
}

[dir=rtl] :where(input):not([type=checkbox], [type=radio], [type=range], [type=file]).has-icon {
  background-position: center right 1.125rem;
}
[dir=rtl] :where(input):not([type=checkbox], [type=radio], [type=range], [type=file]).has-icon[aria-invalid] {
  background-position: center right 1.125rem, center left 0.75rem;
}