css - teclado - inspeccionar elemento google chrome

Eliminar el contorno punteado del elemento de entrada de rango en Firefox

Question

Firefox, desde la versión 23, admite nativamente el elemento <input type="range"> , pero no pude encontrar la manera de eliminar el contorno punteado. El siguiente CSS no tiene ningún efecto:

input[type=''range''], 
input[type=''range'']:focus, 
input[type=''range'']:active, 
input[type=''range'']::-moz-focus-inner, 
input[type=''range'']:-moz-focusring {
    border: 0;
    outline: none;
}

¿Alguien tiene alguna idea de cómo solucionar este problema en Firefox?

Ejemplo: http://jsfiddle.net/pF37g/

Answer 1

Como Ken ya señaló, no hay forma de eliminar el esquema. Sin embargo, hay una solución alternativa para "ocultar" el esquema si conoce el color de fondo del elemento principal. Suponiendo un fondo blanco, el siguiente CSS ocultaría el contorno punteado:

input[type=range] {
    border: 1px solid white;
    outline: 2px solid white;
    outline-offset: -1px;
}

Su ejemplo actualizado: http://jsfiddle.net/9fVdd/15/

Answer 2

El esquema punteado no es un problema, es la manera del navegador de mostrar que el elemento de entrada está seleccionado. Lo que puede hacer es establecer tabIndex en -1, lo que evitará que su elemento de input enfoque en la pestaña y, en consecuencia, tenga el contorno:

<input class="size" type="range" tabIndex="-1" name="size" min="1" max="6" value="6"></input>

Pero después de hacer esto perderá algo de accesibilidad del teclado. Es mejor tener acceso al teclado del elemento de input .

Aquí está el violín: http://jsfiddle.net/pF37g/14/

Answer 3

Lamentablemente, no puedes!

Es un error en Firefox y no hay solución alternativa para arreglar esto además de la fijación de la base de origen en sí (ver a continuación).

También vea el blog Jonathan Watt (quien está trabajando en esto):

Problemas conocidos:

• la apariencia predeterminada de estilo CSS aún necesita trabajo, y el tema original (que le da al control deslizante el aspecto del tema del sistema operativo) aún está por venir ...

En una respuesta a un comentario en su blog sobre este mismo problema, él declara:

En este momento no puedes, lo siento. He archivado el error 932410 para hacerlo posible.

En el momento de la redacción, parece que no hay avances en esto y no se sabe cuándo estará disponible una solución oficial.

Actualizar

Desde que se publicó esta respuesta, se solucionó el error. Ahora puede usar (como se indica en otras respuestas, pero lo incluyo aquí para completarlo):

input[type=range]::-moz-focus-outer {
    border: 0;
    }

Answer 4

No puedes. Parece ser un error en Firefox.

Hace dos esquemas para el elemento de rango. Uno puede influir mediante la configuración de CSS y un segundo, que es resistente a cualquier manipulación.

Establecí el esquema visible para mostrar los problemas: input[type=''range'']:focus { outline: 5px solid green; } input[type=''range'']:focus { outline: 5px solid green; }

Aquí puedes verlo:

http://jsfiddle.net/pF37g/97/

Answer 5

Para completarlo: el error ha sido reparado y ahora está trabajando con:

input[type=range]::-moz-focus-outer { border: 0; }

para eliminar todos los contornos de todas las etiquetas de entrada, use:

input::-moz-focus-inner, input::-moz-focus-outer { border: none; }

fuente: here

Answer 6

Se puede hacer con la nueva versión de Firefox. Como se indica here , este error está solucionado. Por lo tanto, es posible ocultar el borde punteado externo. Para hacerlo, establezca ::-moz-focus-outer borde de ::-moz-focus-outer en 0, así:

input[type=range]::-moz-focus-outer {
    border: 0;
}

Aquí está el ejemplo de trabajo: http://jsfiddle.net/n2dsc/1/

En los navegadores webkit, la línea externa aparecerá si -webkit-appearance: none; Está establecido. Para eliminarlo, simplemente establece :focus el esquema del :focus a ninguno, como este:

input[type=range]:focus {
    outline: none;
}

Aquí está el ejemplo de trabajo: http://jsfiddle.net/8b5Mm/1/

Answer 7

Si puede conformarse con un elemento de envoltura (es probable que ya tenga un envoltorio LI o P ), puede usar CSS solo FireFox para colocar la entrada fuera de la vista y reposicionar la pista / pulgar a la vista.

• Nota 1 : no intente usar translateX : creo que FireFox usa eso para deslizar el dedo, así que quédese con translateY
• Nota 2 - Asegúrese de probar con la navegación por el teclado. Solo debe mover la entrada en la menor cantidad posible para que las líneas punteadas no queden a la vista . Si lo ubicas muy lejos ( translateY(-1000em) ), translateY(-1000em) usabilidad para la navegación con el teclado.

Aqui tienes:

HTML

<span class="range-wrap"><input type="range" /></span>

CSS

.range-wrap {
    overflow: hidden;
}
input[type=''range''] {
    -moz-transform: translateY(-3em);
}
input[type=''range'']::-moz-range-track {
    -moz-transform: translateY(3em)
}
input[type=''range'']::-moz-range-thumb {
    -moz-transform: translateY(3em);
}

http://jsfiddle.net/pF37g/98/

Answer 8

Si se aplica un estilo personalizado a la input[type=''range''] , Firefox usa un modelo diferente (beta) para representar la entrada del rango.

Puedes ver los 2 modelos diferentes aquí:

http://jsfiddle.net/pF37g/75/

Actualmente, no creo que actualmente sea posible tener un cuadro de rango de entrada con estilo CSS personalizado en Firefox para cumplir con el outline: 0; a partir de Firefox 27.0

Answer 9

Tengo poca investigación en la sección de configuración de mozilla agregar esto también

 :-moz-any-link:focus {
    outline: none;
 }
 a, a:active, a:visited, a:hover {
    outline: 0;
}

entonces

:focus {
   outline: none;
}

entonces

::-moz-focus-inner {
      border: 0;
}

Answer 10

Aquí viene la solución

:focus {
    outline:none;
}

::-moz-focus-inner {
    border:0;
}