css - form - input type number maxlength
Cómo eliminar las flechas de la entrada[type="number"] en Opera (3)
Esas flechas son parte de Shadow DOM , que son básicamente elementos DOM en tu página que están ocultos para ti. Si es nuevo en la idea, puede encontrar una buena lectura introductoria aquí .
En su mayor parte, Shadow DOM nos ahorra tiempo y es bueno. Pero hay instancias, como esta pregunta, donde desea modificarla.
Puede modificar estos en Webkit ahora con los selectores adecuados , pero esto todavía está en las primeras etapas de desarrollo. El DOM de Shadow en sí no tiene selectores unificados, por lo que los selectores de webkit son propietarios (y no se trata solo de -webkit , como en otros casos).
Debido a esto, parece probable que Opera todavía no haya tenido tiempo de agregar esto. Sin embargo, encontrar recursos sobre las modificaciones de Opera Shadow DOM es difícil. Algunas fuentes de internet poco confiables que he encontrado dicen o sugieren que Opera no admite la manipulación de DOM de Shadow.
Pasé un poco de tiempo buscando en el sitio web de Opera para ver si había alguna mención, junto con tratar de encontrarlos en Dragonfly ... ninguna búsqueda tuvo suerte. Debido al silencio sobre este tema y a la naturaleza en desarrollo de la manipulación DOM de Shadow DOM + Shadow, parece ser una conclusión segura de que simplemente no puedes hacerlo en Opera, al menos por ahora.
Esta pregunta ya tiene una respuesta aquí:
Solo estoy mirando para eliminar estas flechas, conveniente en ciertas situaciones.
Sin embargo, me gustaría conservar el conocimiento del navegador de que el contenido es puramente numérico. Así que cambiarlo a la input[type="text"] no es una solución aceptable.
Ahora que Opera está basado en webkit, esta pregunta es un poco tímida: ¿Puedo ocultar el cuadro de giro de la entrada del número HTML5?
He estado usando algunos CSS simples y parece eliminarlos y funciona bien.
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
margin: 0;
}
No hay forma.
Esta pregunta es básicamente un duplicado de ¿Hay alguna manera de ocultar los nuevos controles HTML5 que se muestran en Google Chrome & Opera? pero tal vez no sea un duplicado completo, ya que la motivación está dada.
Si el propósito es "la conciencia del navegador de que el contenido es puramente numérico", entonces debe considerar lo que realmente significaría. Las flechas, o spinners, son parte de hacer que la entrada numérica sea más cómoda en algunos casos. Otra parte es comprobar que el contenido sea un número válido, y en los navegadores compatibles con las mejoras de las entradas HTML5, es posible que pueda hacerlo utilizando el atributo de pattern . Ese atributo también puede afectar una tercera característica de entrada, es decir, el tipo de teclado virtual que puede aparecer.
Por ejemplo, si la entrada debe tener exactamente cinco dígitos (como los números postales podrían ser, en algunos países), entonces <input type="text" pattern="[0-9]{5}"> podría ser adecuado. Por supuesto, depende de la implementación cómo se manejará.