Content vs. value
21 October 2013 by @ddprrt | Posted in: CSS, General, HTML5
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:
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
:after because of the very same reason. Those two elements are placed before and after the content of one element:
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.
Rape's bad, if you haven't known already. So use Hugo's sample. This should work just fine for you!
Comments? Shoot me a tweet!