@fylgja/base/form-class-less.css

Base provides a streamlined starting point for any web project. It’s a collection of class-less solutions, allowing you to focus on building your site.

/**
 * Fylgja (https://fylgja.dev)
 * Licensed under MIT Open Source
 */
:where(input:not([type=range], [type=button], [type=reset], [type=submit]), textarea, select) {
  appearance: none;
  margin: 0;
  padding-block: var(--form-py, 0.4375rem);
  padding-inline: var(--form-px, 0.8rem);
  border-width: var(--form-border-width, 1px);
  border-color: var(--form-stroke);
  border-radius: var(--form-radius, 0.35rem);
  background: var(--form-bg, var(--root-bg));
  color: var(--form-color, var(--root-fg));
  transition: color 250ms, background-color 250ms, border-color 250ms, box-shadow 250ms;
}

:where(input:not([type=range], [type=button], [type=reset], [type=submit]), textarea, select):placeholder-shown {
  text-overflow: ellipsis;
}
:where(input:not([type=range], [type=button], [type=reset], [type=submit]), textarea, select):focus-visible {
  border-color: var(--form-active-color);
}
:where(input:not([type=range], [type=button], [type=reset], [type=submit]), textarea, select):disabled {
  box-shadow: none;
  cursor: not-allowed;
}

:where(input:not([type=checkbox], [type=radio], [type=range], [type=button], [type=reset], [type=submit]), textarea, select) {
  --outline-size: 1px;
  --outline-offset: calc(
  	(var(--form-border-width, 1px) + 1px) * -1
  );
  display: block;
  max-inline-size: 100%;
  inline-size: 100%;
}
:where(input:not([type=checkbox], [type=radio], [type=range], [type=button], [type=reset], [type=submit]), textarea, select):is(:disabled, [readonly]:not(:focus)) {
  border-style: var(--form-disabled-border-style, dashed);
}

:where(input[type=checkbox], input[type=radio]) {
  --_gap: var(--icon-gap, 2px);
  block-size: var(--control-size, 1.25em);
  inline-size: var(--control-size, 1.25em);
  border-radius: var(--control-radius, 0.35rem);
  border-width: var(--control-border-width, 2px);
  padding: var(--_gap);
  user-select: none;
}
:where(input[type=checkbox], input[type=radio]):not(:disabled) {
  cursor: pointer;
}
:where(input[type=checkbox], input[type=radio])::after {
  content: "";
  display: block;
  block-size: 100%;
  inline-size: 100%;
  border-radius: inherit;
  background-color: var(--icon-color, currentcolor);
  scale: var(--_show-icon, 0);
  opacity: var(--_show-icon, 0);
  transition: translate 0.15s, scale 0.15s, opacity 0.15s;
  forced-color-adjust: none;
  -webkit-mask: var(--_icon) center/contain no-repeat;
  mask: var(--_icon) center/contain no-repeat;
}
:where(input[type=checkbox], input[type=radio]):checked {
  --_show-icon: 1;
  outline-color: var(--control-checked-stroke, var(--root-fg));
  border-color: var(--control-checked-stroke, var(--root-fg));
  background-color: var(--control-checked-bg, var(--root-fg));
  color: var(--control-checked-color, var(--root-bg));
}

:where(input[type=radio]) {
  --_gap: 3px;
  --control-radius: 50%;
}

:where(input[type=checkbox]:not([role=switch])) {
  --_gap: 1px;
  --_icon: url("#");
  --checked-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='4'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E %3C/svg%3E");
  --indeterminate-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='4'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
}
:where(input[type=checkbox]:not([role=switch])):indeterminate {
  --_show-icon: 1;
  --_icon: var(--indeterminate-icon);
}
:where(input[type=checkbox]:not([role=switch])):checked {
  --_icon: var(--checked-icon);
}

:where(input[type=checkbox][role=switch]) {
  --_show-icon: 1;
  --control-radius: 1.25em;
  inline-size: var(--switch-size, 2em);
}
:where(input[type=checkbox][role=switch])::after {
  inline-size: auto;
  aspect-ratio: 1;
}
:where(input[type=checkbox][role=switch]):checked {
  --_offset-x: calc(
  	var(--switch-size, 2em) -
  	var(--control-size, 1.25em)
  );
}
:where(input[type=checkbox][role=switch]):checked::after {
  translate: var(--_offset-x) 0%;
}
:where(input[type=checkbox][role=switch]):checked:dir(rtl)::after {
  translate: calc(var(--_offset-x) / -1) 0%;
}

:where(input[type=color]) {
  --form-py: 3px;
  --form-px: 3px;
  block-size: var(--block-size, 2.5em);
  inline-size: var(--inline-size, 2.5em);
}
:where(input[type=color])::-webkit-color-swatch-wrapper {
  padding: 0;
  border-radius: inherit;
}
:where(input[type=color])::-moz-color-swatch {
  border: 0;
  border-radius: inherit;
}
:where(input[type=color])::-webkit-color-swatch {
  border: 0;
  border-radius: inherit;
}

:where(input[type=file]) {
  --form-py: 0;
  --form-px: 0 0.8rem;
  --btn-radius: 0;
  --btn-border-width: 0;
  overflow: clip;
}
:where(input[type=file])::file-selector-button {
  margin-inline-end: 1em;
}

:where(select) {
  inline-size: auto;
  word-wrap: normal;
}

:where(select:not([size]:not([size="1"]), [multiple])) {
  --icon-size: var(--select-icon-size, 1.25em);
  --icon-offset: var(--select-icon-offset, 0.8rem);
  padding-inline-end: calc(var(--icon-size) + var(--icon-offset) + 0.5ch);
  background: var(--select-icon, var(--select-light-scheme)) var(--form-bg, var(--root-bg)) var(--icon-position, right) var(--icon-offset) center/var(--icon-size) no-repeat;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
:where(select:not([size]:not([size="1"]), [multiple])):dir(rtl) {
  --icon-position: left;
}

:where(textarea) {
  resize: vertical;
}

:where(textarea:not([row])) {
  min-block-size: var(--textarea-min-size, calc(3.5lh + var(--form-py, 0.4375rem)));
  field-sizing: content;
}

::placeholder {
  opacity: 1;
  color: color-mix(in srgb, currentcolor 54%, transparent);
}

:where(fieldset) {
  min-inline-size: 0;
  margin: 0;
  padding: 0;
}

:where(legend) {
  padding: 0;
}

::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-datetime-edit,
::-webkit-datetime-edit-fields-wrapper,
::-webkit-datetime-edit-year-field,
::-webkit-datetime-edit-month-field,
::-webkit-datetime-edit-day-field,
::-webkit-datetime-edit-hour-field,
::-webkit-datetime-edit-minute-field,
::-webkit-datetime-edit-second-field,
::-webkit-datetime-edit-millisecond-field,
::-webkit-datetime-edit-meridiem-field {
  display: inline;
  padding-block: 0;
}

::-webkit-date-and-time-value {
  min-height: 1lh;
  text-align: inherit;
}

::-webkit-calendar-picker-indicator {
  line-height: 1;
}

:where([list]:not([type*=date], [type=month], [type=week], [type=time])) {
  --datalist-icon: var(--select-icon, var(--chevron-light-scheme));
}
:where([list]:not([type*=date], [type=month], [type=week], [type=time]))::-webkit-calendar-picker-indicator {
  display: block !important;
  background: var(--datalist-icon) center/contain no-repeat;
  opacity: 1;
}
:where([list]:not([type*=date], [type=month], [type=week], [type=time]))::-webkit-list-button {
  appearance: none;
  block-size: 1em;
  inline-size: 1em;
  padding: 3px;
  align-self: center;
  background: var(--datalist-icon) center/contain no-repeat;
}