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

Tags: css

Problem :

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

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.

Solution :

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

    CSS Howto..

    How to make a img flicker using css(should work in all browsers)

    How can i go back, forward and print a (local) WebBrowser1.DocumentText html page that's sourced from my.resorces -

    How to load external css in CakePHP?

    How to make slanted CSS arrow pointing to a div

    How to set the minimum height of a
    box in Internet Explorer 8?

    How to add css and js files on node pages independent of the theme?

    Floating divs, different height, building from left to right. how to fill vertical gaps between levels?

    How to match element containing another element?

    How can I make a button-link, as Like in Facebook?

    How to make text appears alitter above using html and css

    how to make css for work for different mobile sites

    how to div.width css property using js or jquery?

    how to make yo angular load bootstrap theme css

    How to get rid of duplicating image when applying own style to Radio/CheckButtons in GTK with CSS?

    How to implement css classes in form using laravel collective 5.2 . *

    How to center equally spaced anchor tags in

    How/where to center Items on Webpage

    CSS how to scale on the bottom instead of the top of an image

    How to use CSS grid framework for custom widths and gutters?

    How to fit two divs side by side horizontally?

    How to disable Bootstrap 3 collapse nav menu css

    IcoMoon App icon fonts are shown as 

    How to get this image border effect with CSS [closed]

    (css) how to display a div up as compared to the other divs

    How to select multiple objects of a class for css manipulation

    How do I link an external css to overwrite bootstrap css for centering elements?

    How to have a background image properly fade in with CSS

    How to fake width animation with CSS transform?

    How to Align text with respect to image css

    How to change background color of my selector's Pseudo-element on rollover?