Select Page

Category: forms

Text Input with Expanding Bottom Border

Petr Gazarov published a pretty rad little design pattern in his article Text input highlight, TripAdvisor style. It’s a trick! You can’t really make an stretch like that, so Petr makes a to sync the value too, which acts as the border itself. The whole thing is a React component. If you’re willing to use a instead, you could do the whole thing in CSS! See the Pen Outline bottom by Chris Coyier (@chriscoyier) on CodePen. Although that also means no placeholder. Direct Link to Article — Permalink Text Input with Expanding Bottom Border is a post from CSS-Tricks...

Read More

The Output Element

Last night I was rooting around in the cellars of a particularly large codebase and stumbled upon our normalize.css which makes sure that all of our markup renders in a similar way across different browsers. I gave it a quick skim and found styles for a rather peculiar element called that I’d never seen or even heard of before. According to MDN, it “represents the result of a calculation or user action” typically used in forms. And rather embarrassingly for me, it isn’t a new and fancy addition to the spec since Chris used it in a post all the way back in 2011. But regardless! What does output do and how do we use it? Well, let’s say we have an input with a type of range. Then we add an output element and correlate it to the input with its for attribute. See the Pen Input Output #2 by CSS-Tricks (@css-tricks) on CodePen. It… doesn’t really do anything. By default, output doesn’t have any styles and doesn’t render a box or anything in the browser. Also, nothing happens when we change the value of our input. We’ll have to tie everything together with JavaScript. No problem! First we need to find our input in the DOM with JavaScript, like so: const rangeInput = document.querySelector('input'); Now we can append an event listener onto it so that whenever we...

Read More


This is just a random idea, but I can’t stop it from swirling around in my head. Whenever I need to style a form on a fresh project where the CSS and style guide stuff is just settling in, the temptation to reach for a mini form framework is strong. Form elements are finicky, have little cross-browser issues, and are sometimes downright hard to wrassle styling control from. This idea, which I’m just now managing to write about, but haven’t actually done any work toward, would be this mini form framework. Maybe something like “Boilerform”, as Dave jokingly suggested on an episode of ShopTalk. I imagine it something like this: It would have basic form styling to organize form elements, not unlike something like Foundation forms. It would account for cross browser issues, not unlike normalize.css. It would include strongarming styling control over form elements, not unlike WTF, forms? It would include native browser form validation stuff, including UX improvements via native JavaScript API’s, not unlike Validate.js. I think there is value in combining those things into one thing, but doing so… With a light touch, being as unopinionated about the final styling as possible With flexibility, perhaps showing off a gallery of different form types with different styling. I probably don’t have time to head up a project like this, but I wouldn’t mind helping connect humans who...

Read More

Form Validation with Web Audio

I’ve been thinking about sound on websites for a while now. When we talk about using sound on websites, most of us grimace and think of the old days, when blaring background music played when the website loaded. Today this isn’t and needn’t be a thing. We can get clever with sound. We have the Web Audio API now and it gives us a great deal of control over how we design sound to be used within our web applications. In this article, we’ll experiment with just one simple example: a form. What if when you were filling out...

Read More
  • 1
  • 2