This is a concept I first came across a few years back when Lea Verou wrote an article on it. Multi-range sliders have sadly been removed from the spec since, but something else that has happened in the meanwhile is that CSS got better — and so have I, so I recently decided to make my own 2019 version.
In this two-part article, we'll go through the how, step-by-step, first building an example with two thumbs, then identify the issues … Read article
Have you ever had a form that needed to accept a short, arbitrary bit of text? Like a name or whatever. That's exactly what
<input type="text"/> is for. There are lots of different input types (and modes!), and picking the right one is a great idea.
But this little story is about something else and applies to any of them.
What if the text needs to be arbitrary (like "What's your favorite color?") so people can type in whatever, … Read article
In this article, we'll be taking a look at the structure inside
<input type='color'/> elements, browser inconsistencies, why they look a certain way in a certain browser, and how to dig into it. Having a good understanding of this input allows us to evaluate whether a certain cross-browser look can be achieved and how to do so with a minimum amount of effort and code.… Read article
inputmode global attribute provides a hint to browsers for devices with onscreen keyboards to help them decide which keyboard to display when a user has selected any
<input type="text" inputmode="" /> <textarea inputmode="" />
Unlike changing the
type of the form,
inputmode doesn’t change the way the browser interprets the input — it instructs the browser which keyboard to display.
inputmode attribute has a long history but has only very recently been adopted … Read article
:read-only selectors are two mutability pseudo-classes aiming at making form styling easier based on
contenteditable HTML Attributes. While the browser support is not that bad, the various implementations are quite wonky.
According to the official CSS Specifications, a
:read-write selector will match an element when:
- it is either an
- it is a
textareawhich has neither
<li>it is any other editable element