How to give different style, color to dotted border of links?


Tags: html,css,xhtml,accessibility

Problem :

How to give different style, color to dotted border of keyboard navigation? Style should appear only if user use keyboard to navigate not on mouse over and :active.

alt text

And style should work in all mainstream browsers with valid css.



Solution :

That is not possible with CSS. Besides, it is not really desirable for usability reasons. Always keep Jakob Nielsen's "Law of the Web User Experience" in mind:

Users spend most of their time on other websites.

This means that they form their expectations for your site based on what's commonly done on most other sites. If you deviate, your site will be harder to use and users will leave.


    CSS Howto..

    How to manage clashing third party CSS

    How can I force a table made using the CSS display: table to fit within a minimum height?

    javascript - how to get date locale to work?

    How can I create scrollable columns in Bootstrap?

    How to make a hidden border side inherit border properties in CSS

    How to make a grid layout with unknown number of columns and each column has equal size? [closed]

    In Jsoup, how do I parse the CSS query by the attribute, instead of the data?

    How to use background css for an image not in the Content or Resource folder

    list-style-type no showing

    How can create a two-column layout in CSS where one column shrinks to it's content, and the other expands to fill the remaining space?

    Symfony2 Form Type - how to set form CSS class as attribute?

    How do I correctly locate a div within a list when making a horizontal nav bar with HTML/CSS?

    can anyone explain to me what does (content: “\f01a”; ) on css means? and how to use it?

    How to place the text after thumbnails at the bottom?

    Trying to align text with background image. If below a certain resolution the text to the left moves in. How can I fix this?

    How to program the navigation bar(image) web html

    How can I align centered inline-block elements correctly?

    How to use CssStyleCollection for a UserControl?

    How to use CSS to align a custom check box with its label?

    how to create table grid view fix header with long title name using only CSS?

    How to properly set the 100% DIV height to match document/window height?

    how to make unorder list all in same block and have gap within each link (CSS)

    CSS/HTML - How do I get text to go behind an image inside a div

    How i can get the td data getting from css to attach to my current row ,and use for my logic

    Portrait screen with 2 pages but only one of them should show

    Text Underline Showing Underline

    How is this fluid column layout changing to single-column as page narrows?

    how do i hide anchor text without hiding the anchor

    How do I add an underline to unvisited links only?

    How can I set -webkit-mask-box-image through javascript?