CODEWITHSUNDEEP
javascripthtmlcssgoogle-chromefocus
Juraj Jakubov
Juraj Jakubov

Reputation: 261

Can i trigger browser to focus element in JS

When i want to focus on some element I use focus() function which gave me :focus from css. The thing is that when i am focusing with TAB keyboard button i get that styling from css but also some blue styling around element which is probably some browser focus. Can I trigger that blue browser focus somehow too with js?

Upvotes: 0

Views: 313

Answers (2)

redoc
redoc

Reputation: 2469

we can use outline: none;,it hides outline

:not(.focusable){
  outline: none;
}
<input placeholder="You can't focus me*" type="text" />

<p>press tab</p>

<button class="focusable">You can focus me</button>
<button >You can't focus me*</button>

<p>again repeat</p>

<input placeholder="You can't focus me*" type="text" />

<p>press tab</p>

<button class="focusable">You can focus me</button>
<button >You can't focus me*</button>


<p>*Focus is possible to all element,but border is only hided,as per OP's question</p>

Upvotes: 0

Dipak
Dipak

Reputation: 6970

You can override this with the focus-visible CSS. Adding sample working example below for reference

button {
  background: #F0FF00;
  border: 1px solid #ccc;
  font-size: 18px;
}

.clear-focus {
  background: #00FF00;
}

.clear-focus:focus-visible, .clear-focus:focus  {
  outline: none;
  box-shadow: 0px 1px 6px 0px #000;
}
<input placeholder="click to focus here manually" type="text" />

<p>Now press tab</p>
<button >Button without focus override / default focuss css</button>


<p>Now press tab agian</p>
<button class="clear-focus">Override focuss css /  with custom css</button>

isible` CSS class. Sample code below:

Upvotes: 1

Related Questions