CODEWITHSUNDEEP
css
user1833620
user1833620

Reputation: 781

How to give focus to anchor tag without href="#"

How to give focus when using keyboard tab?

<a class="ui-datepicker-prev ui-corner-all" data-handler="prev" data-event="click" title="Prev"><span class="ui-icon ui-icon-circle-triangle-w">Prev</span></a>

I tried using css like this 

ui-datepicker-prev:focus { border:1px solid red}

But this doesn't work well. Anyone know ?

Upvotes: 22

Views: 19777

Answers (4)

idheM
idheM

Reputation: 31

tabindex="0" will make the focusable but not clickable with enter. href is needed.

Upvotes: 3

Kishore
Kishore

Reputation: 141

Either set tabindex="0" or specify href="javascript:;", It should be focusable.

Upvotes: 13

jared perreault
jared perreault

Reputation: 16

I ran into this same issue, browsers will not tab to <a> unless a href exists. I solved this by adding empty href's to my anchor tags, like so

<a href="">Link</a>

Upvotes: -5

Marat Tanalin
Marat Tanalin

Reputation: 14123

First, class selector should start with a dot:

.ui-datepicker-prev:focus {border: 1px solid red; }

As for being able to use keyboard navigation for elements that are nonfocusable by default, setting tabindex="0" attribute should help.

Upvotes: 15

Related Questions