Quiero restaurar la configuración predeterminada de CSS outline en algunos campos de formulario, pero quiero que se restaure el estilo predeterminado de Webkit o navegador.Restaurar el esquema CSS de Webkit en el campo de entrada
La página con la que estoy trabajando tiene outline: none aplicado en todos los elementos, y solo quiero volver a la configuración predeterminada en unos pocos. ¿Algunas ideas?
En lugar de restablecer con el esquema: ninguno, restablecer con el esquema de ancho: 0. Esto evita que el navegador limpieza de los estilos y cuando se vuelve a aplicar un ancho el estilo todavía estará allí.
input:focus {
outline-width: 0;
}
input.nostyle:focus {
outline-width: 5px;
}
utilice una clase en los campos que desee sin un esquema.
.nool { outline: none; }
OneOfOne es correcto. CSS no le permite "deshacer" estilos. Si puede, elimine la regla de css que esté aplicando "outline: none" a cada elemento y use una clase para especificar qué elementos de formulario no deben tener un contorno. – jbarreiros
@jbarreiros: Aunque funciona, no es una solución elegante o semántica para poner clases en todo. La solución de Duopixel logra esto usando CSS puro. – Wylie
La respuesta a su pregunta real (straight from WebKit's default html.css styles) es la siguiente:
:focus {
outline: auto 5px -webkit-focus-ring-color;
}
El valor de -webkit-focus-ring-color se determina por separado en cada plataforma (si eres muy agudo, que puede buscar WebCore::systemFocusRingColor). En la práctica, los valores varían según la plataforma.
En Safari v6 y Chrome v20 en OS X Lion, el valor real es:
outline: rgb(94, 158, 215) auto 5px;
... y en Chrome v20 en Windows y cromo v18 en Linux, el valor que obtuve fue:
outline: rgb(229, 151, 0) auto 5px;
Como se describe en this great StackOverflow answer, puede run this jsFiddle to calculate the outline colour on your own machine.
Esta debería ser la respuesta seleccionada, aunque duopixel ofrece algunas buenas ideas. – ooolala
Aunque esta no es la respuesta real, es una muy buena solución que funciona. ¡Gracias! –