Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

css

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 ?

like image 693
user1833620 Avatar asked Jan 05 '17 02:01

user1833620


People also ask

How do I get an anchor tag without an href?

An <a> element without an [href] attribute is still valid. As far as semantics and styling is concerned, the <a> element isn't a link ( :link ) unless it has an [href] attribute. A side-effect of this is that an <a> element without [href] won't be in the tabbing order by default.

How do you add focus to anchor tag?

Bookmark this question. Show activity on this post. Now, when you are in the text box and you hit the tab key, the anchor tags gets focus, so if you immediately hit enter, you'll run the function closeZoom().

What can I use instead of a href?

Using the "#" character as a placeholder basically makes the link "active." The browser interprets it as a tag that points to something else. If href is empty, the browser will assume the a tag is just another tag.

Can you have a link without href?

An a[href] element is a link (which is why they are matched with :link in css). links are clickable. An a element without the [href] attribute is otherwise just a placeholder for where a link might otherwise have been placed, and not clickable, nor are they in the tabbing order of the page.


2 Answers

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.

like image 59
Marat Tanalin Avatar answered Oct 14 '22 00:10

Marat Tanalin


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

like image 40
Kishore Avatar answered Oct 14 '22 01:10

Kishore