Site logo

Archived topic

Change the CSS of the Links on focus

7 replies · Started by Amos on March 3, 2017

Viewing posts 1–8 of 8

Hello. i want to add borders to the items when they are on focus
(when skip with the tab keyboard between the links).
Thank You :)

Hi there,

For all links? Try this:

a:focus {
    border: 2px solid #000000;
}

Let me know if this doesn't work or if you only want border on specific links. A link to your page indicating which links might help :)

Thank You. but i know this css and when i click on the links with the mouse the border is showing.
i want the border only when i using the tab.

Hmm I think that might be a accessibility thing. Will ask Tom to see how they did it :)

Hmm, :focus is the way to go - not sure if you can make it so it doesn't happen on click as well.

You could try to overwrite it:

a:focus {
    border: 2px solid #000000;
}

a:active {
    border: 0;
}

Ok i write this code - and it work for me.
a:focus {
outline: 5px auto -webkit-focus-ring-color;}

Awesome! Thanks for sharing :)

I´m using this code:

:focus {
    color: #232525;
    outline: #ddd solid 1px;
}
This archived topic is closed to new replies.