Re: [csswg-drafts] Are form controls replaced elements? (#12876)

So what's the state of this right now? On a test page like this:

```html
<!DOCTYPE html>
<style>
input, meter, select, button, progress, textarea, video, canvas, img, marquee, svg, br {
  width: 50px;
  height: 50px;
  margin: 5px;
  display: inline-block;
  position: relative;
  .none > & {
    background-color: lime;
    border: 1px solid;
    appearance: none;
  }
  &::before {
    content: "before";
    position: absolute;
    top: 0;
    left: 0;
  }
  &::after {
    content: "after";
    position: absolute;
    bottom: 0;
    right: 0;
  }
}
</style>
<div class="auto">
  <input type=checkbox>
  <input type=radio>
  <input placeholder=text type=text>
  <input placeholder=number type=number>
  <input placeholder=search type=search>
  <input type=date>
  <input type=month>
  <input type=datetime-local>
  <input type=color>
  <input type=submit>
  <input type=image>
  <input type=file>
  <select><option>select</option></select>
  <textarea>textarea</textarea>
  <marquee>marquee</marquee>
  <progress></progress>
  <button>button</button>
  <canvas></canvas>
  <svg></svg>
  <img>
  <br>
</div>
<div class="none">
  <input type=checkbox>
  <input type=radio>
  <input placeholder=text type=text>
  <input placeholder=number type=number>
  <input placeholder=search type=search>
  <input type=date>
  <input type=month>
  <input type=datetime-local>
  <input type=color>
  <input type=submit>
  <input type=image>
  <input type=file>
  <select><option>select</option></select>
  <textarea>textarea</textarea>
  <marquee>marquee</marquee>
  <progress></progress>
  <button>button</button>
  <canvas></canvas>
  <svg></svg>
  <img>
  <br>
</div>
```

It seems:

 * Firefox only creates `::before` / `::after` for `<button>` / `<input type=submit>` and `<input type=checkbox/radio>` when `appearance: none` (when they just follow `display`).
 * Chrome and WebKit creates `::before` / `::after` for everything above plus:
   * checkbox / radio even when appearance: auto.
   * `date` / `month` / datetime-local` / `color` / `file` / `marquee` / `<progress>`

The choices above don't make a lot of sense to me:
 * Why `text` inputs don't allow generated content but date inputs do?
 * Why submit inputs don't allow generated contents but color inputs (which are basically a button) do?

I think I'd be ok with saying that we allow generated content on:
 * radio / checkbox regardless of appearance (and define them as a plain inline block).
 * All button-like things that don't have extra magic like `<select>` (so `<input type=color/button/submit>`).
 * Marquee, probably, since the author can already put arbitrary content there, and I think engines agree on the internal shadow tree model.

But not on:

 * Image / canvas / video / `<input type=image>` / `<svg>` / `<iframe>`: those are "real replaced" things.
 * `<br>`: very special / not well defined layout model.
 * Text inputs / textarea / datetime inputs / select / `<progress>` / `<meter>` / range inputs / (at least when not in `appearance: base` / `base-select` mode): the internal layout details of those are not spec'd / can't be relied on.

Would people agree with such proposal?

-- 
GitHub Notification of comment by emilio
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/12876#issuecomment-3613205198 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Thursday, 4 December 2025 16:50:18 UTC