Placeholders and Overflow
Oftentimes our search boxes and other form fields get drastically shortened on mobile devices. Unfortunately in some circumstances the INPUT element's placeholder text doesn't fit within the length of the element, thus displaying an ugly "cut off." To prevent this ugly display, you can use CSS placeholder styling and text-overflow: ellipsis!
input[placeholder] { text-overflow: ellipsis; }
::-moz-placeholder { text-overflow: ellipsis; } /* firefox 19+ */
input:-moz-placeholder { text-overflow: ellipsis; }
Most developers are unaware of each of the properties and even fewer are aware that they are so perfectly complimentary!
![An Interview with Eric Meyer]()
Your early CSS books were instrumental in pushing my love for front end technologies. What was it about CSS that you fell in love with and drove you to write about it?
At first blush, it was the simplicity of it as compared to the table-and-spacer...
![fetch API]()
One of the worst kept secrets about AJAX on the web is that the underlying API for it, XMLHttpRequest, wasn't really made for what we've been using it for. We've done well to create elegant APIs around XHR but we know we can do better. Our effort to...
![:valid, :invalid, and :required CSS Pseudo Classes]()
Let's be honest, form validation with JavaScript can be a real bitch. On a real basic level, however, it's not that bad. HTML5 has jumped in to some extent, providing a few attributes to allow us to mark fields as required or only valid if matching...
![Morphing Elements Using MooTools and CSS]()
Morphing an element between CSS classes is another great trick the MooTools JavaScript library enables you to do. Morphing isn't the most practical use of MooTools, but it's still a trick at your disposal.
Step 1: The XHTML
The block of content that will change is...
Cool! I never thought about it, i just robotically styled the placeholder’s text color and similar, but that’s really a “responsive” glance
Hello Sir
Is there a way to handle overflow of an input text element? Currently, browsers hide the extra text. You have to scroll to read it completely. What if I wanted to handle it a little differently? For example, show an ellipses? Would you know a possible solution for this?