One idea I had is to wrap the input in a relative inline parent and absolutely position it inside. Can we make them resize-able even though it’s not particularly natural? What other things ¹ do inputs naturally do that I’m not thinking of?Īs attracted as I am to the idea that we can get auto-resizing for free from the browser by using non-input elements, I’m also a little worried about (my) unknown usability and accessibility risk.Does it actually read the same as an input in a screen reader?.What about the idea that form data is often serialized and sent along, while the code that’s doing it probably isn’t looking for a span?.What about the fact that forms can be submitted with the Enter key?.That’s just a best-guess based on some docs. Notice I put role="textbox" on the element.
If it was a or any other element that is block-level, it would also expand vertically as needed. That will naturally grow to be the width it needs to be for the content it contains. We can make any element editable and input-like with the contenteditable attribute:
It’s weird to me that there is no way to force an input element to mimic this behavior, but alas. I was thinking about this after Remy Sharp blogged about it recently in the context of inline elements. But of course, there are ways, my friend. Kinda funny, as that seems like a reasonable use-case. In fact, there isn’t any simple HTML or CSS way to make them do that. By default, and elements don’t change size based on the content they contain.
0 kommentar(er)
