Search

Nalezeno "input": 150

Core Web Vitals

29.5.2020
Core Web Vitals is what Google is calling a a new collection of three web performance metrics: LCP: Largest Contentful Paint FID: First Input Delay CLS: Cumulative Layout Shift These are all measurable. They aren’t in Lighthouse (e.g. the Audits tab in Chrome DevTools) just yet, but sounds...

Creating an Accessible Range Slider with CSS

7.5.2020
The accessibility trick is using <input type="range"> and wrestling it into shape with CSS rather than giving up and re-building it with divs or whatever and later forget about accessibility. The most clever example uses an angled linear-gradient background making the input look like...

How to Redirect a Search Form to a Site-Scoped Google Search

29.4.2020
This is just a tiny little trick that might be helpful on a site where you don’t have the time or desire to build out a really good on-site search solution. Google.com itself can perform searches scoped to one particular site. The trick is getting people there using that special syntax...

Better Form Inputs for Better Mobile User Experiences

17.4.2020
Here’s one simple, practical way to make apps perform better on mobile devices: always configure HTML input fields with the correct type, inputmode, and autocomplete attributes. While these three attributes are often discussed in isolation, they make the most sense in the context of mobile user...

Value Bubbles for Range Inputs

26.3.2020
HTML5 range inputs, in supported browsers and by design, don't show the user the actual value they are submitting. If you want to use the cool slider, but show the value, you'll have to do that yourself. Here we use the output element and jQuery to show the current value in a bubble that hovers...

Auto-Growing Inputs & Textareas

25.3.2020
By default, <input> and <textarea> elements don't change size based on the content they contain. In fact, there isn't any simple HTML or CSS way to make them do that. Kinda funny, as that seems like a reasonable use-case. But of course, there are ways, my friend. There are always...

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

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