CODEWITHSUNDEEP
css
alexrogers
alexrogers

Reputation: 1584

How to change the focus state in CSS to just affect the keyboard and not mouse clicks

In Chrome/Firefox (haven't looked in other browsers), my mouse clicks are showing the properties attached to the :focus selector. See http://jsfiddle.net/qtLoLf6p/1/

a:focus {
    color: black;
    text-decoration: none;
}

I'd like it to work just like the default blue outline works on anchor (a) tags, just on tab focus and not on click focus.

Note in my fiddle that i've just added the JS so the page doesn't change.

Upvotes: 0

Views: 206

Answers (1)

samuelmr
samuelmr

Reputation: 617

I'm alittle unclear on what you're trying achieve with the overall appearance however I would recommend looking to the :active selector.

When tabbing onto a link, the :focus selector is fulfilled, however when clicking on a link the :active selector is also fulfilled, this means you can set your styling for tabbing in :focus, and then override these styles with the mouse only properties in :active

The below example will give both the mouse click and the tab event different styling

a:focus {
    color: #000;
    text-decoration: none;
}
a:active {
    color: #F00;
    text-decoration: underline;
}

JSFiddle example here

Edit: An extract from CSS-Tricks explaining the purpose of :focus

The :focus pseudo class in CSS is used for styling an element that is currently targeted by the keyboard, or activated by the mouse

:focus selector explanation article

Upvotes: 2

Related Questions