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 …

Avatar of Robin Rendle
Robin Rendle on

A Boilerform Idea

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 …

Avatar of Chris Coyier
Chris Coyier on (Updated on )

Prefilling a Date Input

HTML has a special input type for dates, like this: <input type="date"/>. In supporting browsers (pretty good), users will get UI for selecting a date. Super useful stuff, especially since it falls back to a usable text

Avatar of Chris Coyier
Chris Coyier on

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 …

Avatar of Ruth John
Ruth John on

caret-color

The caret-color property in CSS changes the color of the cursor (caret) in inputs, texareas, or really any element that is editable, like:

input,
textarea,
[contenteditable] {
  caret-color: red;
}

The color of the caret generally matches the color of …

Avatar of Chris Coyier
Chris Coyier on (Updated on )

:focus-within

The :focus-within pseudo-selector in CSS is a bit unusual, although well-named and rather intuitive. It selects an element if that element contains any children that have :focus.

form:focus-within {
  background: lightyellow;
}

Which works like this…

<!-- this form 
Avatar of Chris Coyier
Chris Coyier on (Updated on )