vertical - jQuery UI: elimina el borde de la pestaña naranja en el foco
jquery vertical tabs (8)
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>
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.
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 .
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
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;
}
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/
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;
}
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;
}
li a
{
outline-color: transparent;
}