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 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.



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 add spacing between two rows of multiple divs each

    How do we group monospace font families with regards to their serif property? [closed]

    How can I float divs so that they expand past their container?

    With html tables, using CSS, how do I get the tables next to each other?

    How to override css attribute-only style

    How to make a content div stretch from a header div to a footer div?

    How to prevent HTML elements from being pushed down the page

    How to layout these elements via HTML/CSS circumventing DOMPDF's lack of float?

    Showing :before but hiding element with CSS only

    How to create HTML5 popup with minimize etc

    How to hide DIV when scroll reach at Bottom through CSS?

    How to output CSS files to single directory from several input directories?

    How to target individually nested elements using CSS

    Wordpress top menu link to show/hide div

    How can I hide elements on a HTML page until a user hovers over it using CSS?

    How to float inline elements with css

    How to make a TableLayoutPanel like resizable div in html

    How do I use the CSS box-model to make sure my body is spaced from the edge of the window despite being 100% high?

    How To Vertically Align Text On A Squarespace Button?

    How to make tabs with pure HTML/CSS

    How to make top and bottom of div triangle with CSS?

    How to identify is a blog post has been selected or not?

    How to add fade in and fade out effect in CSS animations no javascript?

    How do I append jumping dots to a text in html and css

    How to load CSS for different URL in spring MVC app

    looking for a good explanation on how html gets rendered and how css effects it [closed]

    How To Get Circle Image Between
    Tag Like Tumblr In HTML? [closed]

    How can you stop the screen scrolling from the top of a Phonegap app?

    how to do external scripting?

    how to align element to bottom of page in print preview