7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 20Length: 1.2 hours

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

2.6 Remove Dotted Outline on Links

Welcome to lesson number 6 from this course, the last one from the Typography section. Before I move on to other tips and tricks, I wanna show you a simple technique that you might find useful.

2.6 Remove Dotted Outline on Links

Welcome to Lesson No. 6 from this course, the last one from the typography section. Now, before I move on to other tips and tricks, I want to show you a simple technique that you might find useful. So consider the following layout with two links. Look at what happens when I tab through them. Yeah, notice on these links as well. They have this dotted border around them. Now, that line can easily be removed by using the outline none, a property on the anchor tag's focus state. So let's go back to Sublime, and we're going to say a focus, outline none, or you can even say outline zero. It's the same thing. All right. So now refresh. And when I tab through them, notice they don't have that border anymore. Now, that outline is important for accessibility, because you can easily navigate the webpage by using the keyboard, so, you know, think twice before removing it. The outline property also has an effect on text inputs. So if I focus on this one, notice this blue glow around the edges. And actually this glow only happens in Chrome, as far as I know. So if you don't want it or you want to create some custom styles for that form, you need to remove it. And you basically have to use the same property. So if I target input, type text, refresh, focus, and it's not there anymore. And that's it for this very short lesson. Next up, I'll show you how to create some custom radio buttons and check boxes.

Back to the top