How to add or change the outline color of the HTML elements when focused using the tab key in CSS?
Tags: css
Published: 2022-12-12 05:23:04

---
  title: How to add or change the outline color of the HTML elements when focused using the tab key in CSS?
  published: true
  tags: CSS
  date: Mon Dec 12 2022 10:53:04 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/change-add-outline-color-html-elements-when-focused-using-tab-key-in-css
  cover_image: https://res.cloudinary.com/df8e3k5he/image/upload/blog/main_634839061a.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/change-add-outline-color-html-elements-when-focused-using-tab-key-in-css)
  To add or change the outline color of HTML elements when focused using the tab key, you can use the `:focus-visible` pseudo-class for the particular HTML element and then use the `outline` CSS property and set its value of your choice.

### TL;DR

```html
<html>
  <style>
    /* 
      Using the `a` selector and using the `:focus-visible` pseudo-class
      to change the outline style of the anchor tag when focused using the tab key
    */
    a:focus-visible {
      outline: 3px solid red;
    }
  </style>
  <!-- A simple webpage with 3 anchor tags -->
  <body>
    <a href="#">Home</a>
    <a href="#">About Us</a>
    <a href="#">Privacy Policy</a>
  </body>
</html>
```

For example, let's say have some anchor (`a`) HTML elements for the navigation in the webpage like this,

```html
<html>
  <body>
    <a href="#">Home</a>
    <a href="#">About Us</a>
    <a href="#">Privacy Policy</a>
  </body>
</html>
```

A visual representation of the focusing the anchor HTML element tag using the tab key in the keyboard is shown below,

![focusing anchor tags using tab key in keyboard](/uploads/01_cf666230e1.gif)

As you can see from the above GIF that when focusing on the anchor tags, a default blue outline is shown for each anchor tag.

We aim to change this outline color to a `red` color and also want to increase its outline thickness by `3px`.

To do that first, we can select all the `a` HTML elements in the CSS stylesheet using the `a` selector and then use the `:focus-visible` pseudo-class on the selector.

It can be done like this,

```html
<html>
  <style>
    /* Using the `a` selector and using the `:focus-visible` pseudo-class */
    a:focus-visible {
      /* styles to trigger when focussed using the tab key can be written here */
    }
  </style>
  <!-- A simple webpage with 3 anchor tags -->
  <body>
    <a href="#">Home</a>
    <a href="#">About Us</a>
    <a href="#">Privacy Policy</a>
  </body>
</html>
```

We have defined the `:focus-visible` pseudo-class on the `a` selector.

Now let's change the color of the outline when the anchor tag is focused using the tab key.

To do that we can use the `outline` CSS property and then use `3px solid red` as the value (`3px` refers to the width of the outline, `solid` refers to the style of the line and `red` refers to the color of the outline) inside the `:focus-visible` pseudo-class code block.

It can be done like this,

```html
<html>
  <style>
    /* 
      Using the `a` selector and using the `:focus-visible` pseudo-class
      to change the outline style of the anchor tag when focused using the tab key
    */
    a:focus-visible {
      outline: 3px solid red;
    }
  </style>
  <!-- A simple webpage with 3 anchor tags -->
  <body>
    <a href="#">Home</a>
    <a href="#">About Us</a>
    <a href="#">Privacy Policy</a>
  </body>
</html>
```

The anchor HTML element now looks like this on the webpage when focused using the tab key,

![anchor tag having 3px thickness and red color outline when focused using the tab key on the webpage](/uploads/02_28e014541f.gif)

We have successfully changed the outline color of all the `a` HTML elements on the webpage to red color. Yay 🥳!

Like this, we set the styles to any HTML elements in the webpage.

See the above code live in [codesandbox](https://codesandbox.io/s/change-add-outline-color-html-elements-when-focused-using-tab-key-in-css-bf1089?file=/index.html).

That's all 😃.