Archived topic
Change the CSS of the Links on focus
7 replies · Started by Amos on March 3, 2017
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;
}