I’d rather use CSS pseudo-classes (Hover, active, focus…).Anything that jQuery was used for in this article was specifically for something that CSS can’t do by itself.You could do the same thing with :focus, what are you talking about “css can’t do by itself”.The background image stays removed if there is text within the textarea. /* Chrome, Firefox, Opera, Safari 10.1+ */
::placeholder {
textarea { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width: 100%; } View Demo Setting the box-sizing to border-box allows the textarea to respect its parent container's padding and border, recalculating what 100% actually means. 5. 3. You can take control of your textareas and style them with CSS, just like … HTML5 placeholder text. That text-test can only be performed with JavaScript.Hm… although I admit it’s not cross-browser, but there is *:empty, right ?js is used to determine if there’s text or not inside when the focus leaves the textarea, and returns the background only if the textarea has no text.Wonderful article, I find it very helpful. Thanks. To restore the browser default, you can just force the border back to normal.That background image might interfere with the readability of the text once the text reaches that far.
The Overflow Blog
… I’d also like to point out that for your first example, it’s good to give a CSS fallback with the :focus pseudo-class.Other than that I will definitely be using some of these in the future, especially the auto-resize.On my Mac version it does, maybe that’s a Mac-only thing?Chrome on Windows puts a yelloworange glow around the textboxWell, at least your comment text box doesnt get a yellow orange glow on Chrome (Windows).
Where(css page?) The example above applies to all elements. In ... 2. In most browsers,