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!
![Write Better JavaScript with Promises]()
You've probably heard the talk around the water cooler about how promises are the future. All of the cool kids are using them, but you don't see what makes them so special. Can't you just use a callback? What's the big deal? In this article, we'll...
![Welcome to My New Office]()
My first professional web development was at a small print shop where I sat in a windowless cubical all day. I suffered that boxed in environment for almost five years before I was able to find a remote job where I worked from home. The first...
![HTML5 Placeholder Styling with CSS]()
Last week I showed you how you could style selected text with CSS. I've searched for more interesting CSS style properties and found another: INPUT placeholder styling. Let me show you how to style placeholder text within INPUTelements with some unique CSS code.
The CSS
Firefox...
![HTML5 Input Types Alternative]()
As you may know, HTML5 has introduced several new input types: number, date, color, range, etc. The question is: should you
start using these controls or not? As much as I want to say "Yes", I think they are not yet ready for any real life...
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?