Playground de field-sizing en CSS

<form class="field-sizing-demo">
  <label>
    Text
    <input type="text" value="BaselineLab" />
  </label>

  <label>
    Email
    <input type="email" value="dev@baseline.lab" />
  </label>

  <label>
    Number
    <input type="number" value="2026" />
  </label>

  <label>
    Password
    <input type="password" value="field-sizing" />
  </label>

  <label>
    Search
    <input type="search" value="CSS forms" />
  </label>

  <label>
    Tel
    <input type="tel" value="+34 600 000 000" />
  </label>

  <label>
    URL
    <input type="url" value="https://baselinelab.dev" />
  </label>

  <label>
    File
    <input type="file" />
  </label>

  <label>
    Select
    <select>
      <option>content</option>
      <option>fixed</option>
    </select>
  </label>

  <label>
    Textarea
    <textarea>field-sizing adapta el tamaño al contenido.</textarea>
  </label>
</form>

<form class="flex flex-col items-start gap-3.5 max-inline-[44rem] *:grid *:content-start *:gap-[0.35rem] [&_:where(input[type=email],input[type=file],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=url],select,textarea)]:field-sizing-content [&_:where(input[type=email],input[type=file],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=url],select,textarea)]:py-[0.62rem] [&_:where(input[type=email],input[type=file],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=url],select,textarea)]:px-[0.78rem] [&_:where(input[type=email],input[type=file],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=url],select,textarea)]:border [&_:where(input[type=email],input[type=file],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=url],select,textarea)]:border-solid [&_:where(input[type=email],input[type=file],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=url],select,textarea)]:border-[color-mix(in_srgb,_currentColor_24%,_transparent)] [&_:where(input[type=email],input[type=file],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=url],select,textarea)]:rounded-lg [&_:where(input[type=email],input[type=file],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=url],select,textarea)]:[font:inherit] [&_:where(input[type=email],input[type=file],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=url])]:min-inline-[10ch] [&_:where(input[type=email],input[type=file],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=url])]:inline-auto [&_:where(input[type=email],input[type=file],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=url])]:max-inline-full [&_textarea]:min-block-[3lh] [&_textarea]:max-inline-full [&_textarea]:resize-y">
  <label>
    Text
    <input type="text" value="BaselineLab" />
  </label>

  <label>
    Email
    <input type="email" value="dev@baseline.lab" />
  </label>

  <label>
    Number
    <input type="number" value="2026" />
  </label>

  <label>
    Password
    <input type="password" value="field-sizing" />
  </label>

  <label>
    Search
    <input type="search" value="CSS forms" />
  </label>

  <label>
    Tel
    <input type="tel" value="+34 600 000 000" />
  </label>

  <label>
    URL
    <input type="url" value="https://baselinelab.dev" />
  </label>

  <label>
    File
    <input type="file" />
  </label>

  <label>
    Select
    <select>
      <option>content</option>
      <option>fixed</option>
    </select>
  </label>

  <label>
    Textarea
    <textarea>field-sizing adapta el tamaño al contenido.</textarea>
  </label>
</form>

.field-sizing-demo {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 0.875rem;
  max-inline-size: 44rem;
}

.field-sizing-demo label {
  display: grid;
  align-content: start;
  gap: 0.35rem;
}

.field-sizing-demo :where(input[type="email"], input[type="file"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="url"], select, textarea) {
  field-sizing: content;
  padding-block: 0.62rem;
  padding-inline: 0.78rem;
  border: 1px solid color-mix(in srgb, currentColor 24%, transparent);
  border-radius: 0.5rem;
  font: inherit;
}

.field-sizing-demo :where(input[type="email"], input[type="file"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="url"]) {
  min-inline-size: 10ch;
  inline-size: auto;
  max-inline-size: 100%;
}

.field-sizing-demo :where(textarea) {
  min-block-size: 3lh;
  max-inline-size: 100%;
  resize: vertical;
}

.field-sizing-demo {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 0.875rem;
  max-inline-size: 44rem;

  label {
    display: grid;
    align-content: start;
    gap: 0.35rem;
  }

  :where(input[type="email"], input[type="file"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="url"], select, textarea) {
    field-sizing: content;
    padding-block: 0.62rem;
    padding-inline: 0.78rem;
    border: 1px solid color-mix(in srgb, currentColor 24%, transparent);
    border-radius: 0.5rem;
    font: inherit;
  }

  :where(input[type="email"], input[type="file"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="url"]) {
    min-inline-size: 10ch;
    inline-size: auto;
    max-inline-size: 100%;
  }

  :where(textarea) {
    min-block-size: 3lh;
    max-inline-size: 100%;
    resize: vertical;
  }
}