Title’s for all content strategists out there who expect something really meta and with a lot of additional bla bla. Well, this is about HTML Content vs. Input Values.
Margin psycho and Sass expert Hugo Giraudel (check out his awesome blog, btw!) brought up a pretty sweet sample on Codepen, showing an input field resizing it’s width depending on the characters typed in, using the new ‘ch’ unit. The original question was, if there was a CSS only way to recreate this behavior:
Do any of you guys think of a pure CSS way to make an input element wrap around its content? I’m not sure it’s possible actually.
And Hugo is completely right, it isn’t possible. And that’s per definition. input elements are content-less in HTML terms, since they can’t hold content like other HTML elements do:
<p>this is content</p>
<span>this is also content</span>
<input>IMPOSSIBRU</input>
The last one is obviously bogus. Correct way would be <input type="text" value="That is better">. Auto-width in CSS is only possible with elements that can have content.
If you compare it to other CSS techniques, you’ll notice that input elements can’t have pseudo elements like :before and :after because of the very same reason. Those two elements are placed before and after the content of one element:
<p>
<before goes here>
Content
<after goes there>
</p>
I’m not sure why inputs can’t have content. I assume it has something to do with being connected tightly with the Operating System (at least in the past). Maybe you can help me on that one. The spec defines them as void elements which aren’t allowed to have content in any way.
How can you achieve this behavior CSS only?
Rape accessibility and use a span.
<span contenteditable>
this is my content
</span>
Rape’s bad, if you haven’t known already. So use Hugo’s sample. This should work just fine for you!