PikoPong
  • Web Dev
  • Hack
  • Database
  • Big Data
  • AWS
  • Linux
No Result
View All Result
PikoPong
  • Web Dev
  • Hack
  • Database
  • Big Data
  • AWS
  • Linux
No Result
View All Result
PikoPong
No Result
View All Result
Home Web Dev

Focus ring default styles

July 28, 2020
in Web Dev
280 12
Focus ring default styles


I’ve been tinkering on a tool that has a custom UI but I wanted to still support keyboard navigation and with keyboard navigation comes tabbing to focus elements.

I have an element that is an underlying checkbox, but toggles between the label of “T” and “-“, so I’m using CSS to change visual state:

.bool input:checked + label.t::before {
  content: 'T';
}
.bool input + label::before {
  content: '-';
  width: 100%;
  font-size: inherit;
  line-height: inherit;
}

The problem was that when I tabbed focus to the checkbox, the label text didn’t look focused. I could add a border (or something) to the label, but I wanted it to look the same as the browser default focus ring.

TIL: Firefox has a Highlight that compliments webkit’s focus ring colour, and (thankfully) Firefox ignores the -webkit- prefixed colour:

.bool input:focus + label::before {
  outline: 5px auto Highlight;
  outline: 5px auto -webkit-focus-ring-color;
}

Now it looks right:

TIL: focus rings



Source link

Share219Tweet137Share55Pin49

Related Posts

Intrinsic Typography is the Future of Styling Text on the Web
Web Dev

Intrinsic Typography is the Future of Styling Text on the Web

The way we style text hasn’t changed much over the years. There have been numerous advancements to help make...

April 20, 2021
Say Hello To CSS Container Queries
Web Dev

Say Hello To CSS Container Queries

I haven’t been more excited for a CSS feature like I’m now in the past six years I spent...

April 20, 2021
Keep Logs Tidy With the Log Cleaner Package for Laravel
Web Dev

Keep Logs Tidy With the Log Cleaner Package for Laravel

Laravel Log Cleaner is a package by Joost van Veen for keeping your log files small and tidy. While...

April 20, 2021
Making GraphQL Work In WordPress — Smashing Magazine
Web Dev

Making GraphQL Work In WordPress — Smashing Magazine

About The AuthorLeonardo Losoviz is a freelance developer and writer, with an ongoing quest to integrate innovative paradigms (Serverless...

April 20, 2021
Next Post
New – Amazon EC2 Instances based on AWS Graviton2 with local NVMe-based SSD storage : idk.dev

New – Amazon EC2 Instances based on AWS Graviton2 with local NVMe-based SSD storage : idk.dev

Want to get better at code? Teach someone CSS.

Want to get better at code? Teach someone CSS.

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Recommended

Web components: the secret ingredient helping power the web

Web components: the secret ingredient helping power the web

May 24, 2020
How to Make a List Component with Emotion

How to Make a List Component with Emotion

July 8, 2020
highlights from Chrome Developer Summit 2019

highlights from Chrome Developer Summit 2019

May 26, 2020
Change vs. Inertia | CSS-Tricks

Change vs. Inertia | CSS-Tricks

December 18, 2020

Categories

  • AWS
  • Big Data
  • Database
  • DevOps
  • IoT
  • Linux
  • Web Dev
No Result
View All Result
  • Web Dev
  • Hack
  • Database
  • Big Data
  • AWS
  • Linux

Welcome Back!

Login to your account below

Forgotten Password?

Create New Account!

Fill the forms bellow to register

All fields are required. Log In

Retrieve your password

Please enter your username or email address to reset your password.

Log In