Change the CSS of the Links on focus

[Amos]

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 🙂

GeneratePress 1.3.44

GP Premium 1.2.94

[Leo]

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 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Amos]

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.

[Leo]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Tom]

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;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Amos]

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

[Tom]

Awesome! Thanks for sharing 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Jörgen]

I´m using this code:

:focus {
    color: #232525;
    outline: #ddd solid 1px;
}

[Author]

Posts