vertical - jQuery UI: elimina el borde de la pestaña naranja en el foco

jquery vertical tabs

Question

Estoy tratando de eliminar este borde:

y dado que se muestra solo en el foco, no puedo encontrar qué clase sobreescribir usando la consola de Chrome.

¿Alguien ha hecho esto y sabía cuál es la clase que debería sobrescribir?

Editar: Supongo que este es el comportamiento estándar y here puedes ver el ejemplo. También estoy usando Chrome.

Answer 1

SOLUCIÓN RÁPIDA:

La solución si quieres afectar el elemento real .ui.

.ui-state-active a, .ui-state-hover a {
    outline: none;
}

¿Cuál era la diferencia entre la respuesta de Anon y Konstantin D?

Anon eligió legítimamente la "etiqueta" dentro de la "etiqueta li". Recuerda siempre, que las pestañas (); usa "a tags" dentro de la lista no ordenada. Para mostrar realmente las pestañas de navegación.

EJEMPLO:

CSS también afecta el esquema en li: a tags

.ui-state-active a, .ui-state-hover a {
    outline: none;
}

Activa el widget jQuery UI Tabs

$(''#my-tabs'').tabs();

Marcado de pestañas en HTML

<div id="my-tabs">
    <ul>
        <li><a href="#tab-1">Tab 1</a></li>
        <li><a href="#tab-2">Tab 1</a></li>
    </ul>
    <div id="tab-1"></div>
    <div id="tab-2"></div>
</div>

Answer 2

Estaba enfrentando el mismo problema. jQuery mobile aplica clases en tiempo de ejecución, probé las soluciones anteriores pero no funcionó, luego <div data-role="navbar" class="ui-corner-all"> formulario de la clase ui-shadow <div data-role="navbar" class="ui-corner-all"> Eso cumplió con mi requisito .

Answer 3

Me gusta la solución de Daniel, solo agregaría esto:

.ui-state-active a, .ui-state-hover a, .ui-state-visited a, .ui-state-focus a  {
    outline: none;
}

el .ui-state-visited a & .ui-state-focus a stop it que muestra el esquema cuando haces clic en una pestaña diferente / tu mouse deja el área de desplazamiento

Answer 4

Mi respuesta es una combinación de todas las respuestas anteriores, simples y cortas, use la siguiente

.ui-tabs .ui-tabs-nav li a { 
    outline:none;
}

Answer 5

Puede anular las clases css ui-state-focus y ui-state-active .

.ui-state-focus {
    border: none;
    outline: none;
}

.ui-state-active {
    border: none;
    outline: none;
}

En el caso de jQuery UI, las pestañas que anulan ui-state-active deberían ser suficientes.

Actualización : en su caso, esta no es la clase ui-state-active, sino más bien el esquema de ancla regular en webkit. He actualizado tu violín: http://jsfiddle.net/ukPW6/4/

Answer 6

Si las soluciones anteriores aún no funcionan, es causada por la propiedad de box-shadow . Prueba esto:

.ui-state-focus:focus, .ui-state-focus, li a {
    box-shadow:none;
}

Answer 7

la respuesta aceptada funciona en Firefox pero tuve problemas con Chrome en una Mac.
el atributo de estilo de esquema pareció resolver esto por mí.

.ui-state-focus {
        outline-style:none;
    }

Answer 8

li a
{
    outline-color: transparent;
}​