Better Focus Styles with CSS Pseudo-Class :focus-visible

Channel:
Envato Tuts+
Subscribers:
1,670,000
Published on ● Video Link: https://www.youtube.com/watch?v=OaNNOoT5Z9k


Duration: 11:55
5,993 views
156

In this quick tip, I’m going to show you how to create better focus styles with a CSS pseudo-class called :focus-visible. Or, in plain English, I’m going to show you how to restyle the blue outline you see when you click on form fields (in a way that doesn’t harm accessibility). ► Download Unlimited UI kits, web fonts & WordPress themes with Envato Elements: https://elements.envato.com/?utm_campaign=yt_tutsplus_OaNNOoT5Z9k&utm_medium=referral&utm_source=youtube.com&utm_content=description

Read more on How to Use focus-visible on Envato Tuts+: https://webdesign.tutsplus.com/tutorials/css-pseudo-class-focus-visible--cms-37211?utm_campaign=yt_tutsplus_OaNNOoT5Z9k&utm_medium=referral&utm_source=youtube.com&utm_content=description

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Envato Tuts+
Discover free how-to tutorials and online courses. Design a logo, create a website, build an app, or learn a new skill: https://tutsplus.com/?utm_campaign=yt_tutsplus_OaNNOoT5Z9k&utm_medium=referral&utm_source=youtube.com&utm_content=description

Envato Elements
All the creative assets you need under one subscription. Customize your project by adding unique photos, fonts, graphics, and themes.
► Download Unlimited Stock Photos, Fonts & Templates with Envato Elements: https://elements.envato.com/?utm_campaign=yt_tutsplus_OaNNOoT5Z9k&utm_medium=referral&utm_source=youtube.com&utm_content=description

► Subscribe to Envato Tuts+ on YouTube: https://www.youtube.com/tutsplus
► Follow Envato Tuts+ on Twitter: https://twitter.com/tutsplus
► Follow Envato Tuts+ on Facebook: https://www.facebook.com/tutsplus
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -



Other Videos By Envato Tuts+


2021-06-28How to Create an Inflated 3D Frilly Text Effect in Adobe Photoshop
2021-06-27How to Create Different Vector Textures Using Adobe Illustrator
2021-06-26How to Make a Drop-Down Menu in WordPress
2021-06-25How to Create Type on a Path in InDesign
2021-06-245 Top Premiere Pro Animation Templates & Components to Make Motion Graphics
2021-06-24Get Real-Time Exchange Rates With exchangeratesapi
2021-06-23A to Z of Affinity Designer: Tips, Tricks, and Hacks!
2021-06-22Watch Me Work: Storm Effects in Photoshop | Speed Art
2021-06-21How to Curve Text in InDesign
2021-06-20How to Trace an Image in Illustrator
2021-06-19Better Focus Styles with CSS Pseudo-Class :focus-visible
2021-06-18How to Draw a Cute Deer | Draw Simple Cute Animals in Chibi Style #shorts
2021-06-18How to Make Dripping Text in Photoshop
2021-06-17Build a WordPress LMS Website With the Masterstudy Theme
2021-06-1610 Must-Have Wireframe Templates and UI Kits
2021-06-154 Easy Tips for Color Correction in Premiere Pro
2021-06-14How to Make a Great Infographic With Google Slides Templates
2021-06-14Adobe Illustrator Patterns: A Basic Guide
2021-06-13How to Copy a Page in WordPress
2021-06-12How to Make Twitch Alerts (With 10+ Custom Notification Examples!)
2021-06-11Punk Rock Portrait in Procreate | Watch Me Work! #shorts


Tags:
Better Focus Styles with CSS Pseudo-Class :focus-visible
Envato
Tuts+
Envato Tuts+
better focus styles with css pseudo-class :focus-visible
css
html
css grid
ux
user experience
css tutorial
web development
javascript
web design
accessibility
css3
html5
cascading style sheets
developer
code
envato market
envato elements review
envato elements
focus-visible
css pseudo-class