Cuando quiero enfocarme en algún elemento, uso la función focus() que me dio :focus de css. La cuestión es que cuando me enfoco con el botón del teclado TAB, obtengo ese estilo de css, pero también un estilo azul alrededor del elemento que probablemente sea un enfoque del navegador. ¿Puedo activar ese enfoque de navegador azul de alguna manera también con js?
Puede anular esto con el CSS focus-visible . Agregar ejemplo de trabajo de muestra a continuación para referencia
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>Clase CSS visible. Ejemplo de código a continuación:
outline: none; ,oculta contorno :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>