Search

Nalezeno "Input": 164

Stop Using “Dropdown”

16.3.2020
Adrian Roselli notes that it might actually mean: A <select> menu An ARIA Listbox, Combobox, Menu, or Disclosure Widget An input with a <datalist> An input with autocomplete A <details><summary> block An accordion Flyout navigation In my own usage, I tend to mean...

Sass !default and themeable design systems

11.3.2020
This is a great blog post from Brad Frost where he walks us through an interesting example. Let’s say we’re making a theme and we have some Sass like this: .c-text-input { background-color: $form-background-color; padding: 10px } If the $form-background-color variable isn’t defined then...

What to Use Instead of Number Inputs

6.3.2020
You might reach for <input type="number> when you're, you know, trying to collect a number in a form. But it's got all sorts of issues. For one, sometimes what you want kinda looks like a number, but isn't one (like how a credit card number has spaces), because it's really just a string...

HTML: The Inaccessible Parts

29.2.2020
<input type="number", <input type="date", <input type="search", <select multiple, <progress, <meter, <dialog, <details<summary, <video, <div onclick, <div aria-label, <a href<divBlock Links</div</a, aria-controls...

Custom Styling Form Inputs With Modern CSS Features

7.2.2020
It’s entirely possible to build custom checkboxes, radio buttons, and toggle switches these days, while staying semantic and accessible. We don’t even need a single line of JavaScript or extra HTML elements! It’s actually gotten easier lately than it has been in the past. Let’s take a look. Here’s...

Awesome Forward & Reverse Geocoding API: positionstack (Sponsored)

6.2.2020
One awesome web functionality we take for granted is geolocation. Based on geolocation data, we can get someone to their destination, provide them suggestions based on their location, and so on. One downside of native geolocation, especially in the browser, is that it’s limited in both input...

Four Layouts for the Price of One

29.1.2020
Pretty notable when a tweet about a flexbox layouts gets 8K+ likes on Twitter! 4 layouts for the price of 1, thanks flex ???? css` form { display: flex; flex-wrap: wrap; & > input { flex: 1 1 10ch; margin: .5rem; &[type="email"] { flex: 3...

Searching the Jamstack

22.1.2020
Here's Raymon Camden on adding site search functionality to a site that is statically hosted. A classic trick! Just shoot 'em to Google and scope the results to your site: <form action="https://www.google.com/search" method="get"<input type="search" name="q"...

Show Search Button when Search Field is Non-Empty

5.11.2019
I think the :placeholder-shown selector is tremendously cool. It allows you to select the placeholder of an input (<input placeholder="...">) when that placeholder is present. Meaning, the input does not yet have any value. You might think input[value] could do that, or help match on...

Multi-Million Dollar HTML

30.9.2019
Two stories: Jason Grigsby finds Chipotle's online ordering form makes use of an input-masking technique that chops up a credit card expiration year making it invalid and thus denying the order. If pattern="\d\d" maxlength="2" was used instead (native browser feature), the browser is smart enough...

How to Create a Webcam Audio Visualizer with Three.js

6.9.2019
A tutorial on how to create a Three.js powered audio visualizer that takes input from the user's webcam. How to Create a Webcam Audio Visualizer with Three.js was written by Ryota Takemoto and published on Codrops

Collective #541

19.8.2019
Get Waves * StoryTime * MC.JS * Input delay * Variable Font Animation * Divjoy * HeadBanger Collective #541 was written by Pedro Botelho and published on Codrops

Datalist is for suggesting values without enforcing values

26.7.2019
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...

Color Inputs: A Deep Dive into Cross-Browser Differences

12.7.2019
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...

Everything You Ever Wanted to Know About inputmode

17.5.2019
The 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 or textarea element. <input type="text" inputmode="" /> <textarea inputmode="" /> Unlike changing the type...

Nahoru
Tento web používá k poskytování služeb a analýze návštěvnosti soubory cookie. Používáním tohoto webu s tímto souhlasíte. Další informace