0
210
Views¿Por qué las entradas de "fecha" y "hora" no se muestran correctamente en Google Chrome Mobile?
Tengo un pequeño sistema de programación que desarrollé ( Mira aquí ).
Las entradas de "fecha" y "hora" se muestran normalmente en la mayoría de los navegadores de escritorio y móviles:
¡Pero por una razón que no sé! En Google Chrome Mobile, aparece un color de fondo gris en los campos de "fecha" y "hora". Además, los iconos predeterminados se han ido:
Probé en todos los navegadores, pero esto solo ocurre con Google Chrome Mobile. Quiero arreglar esto pronto, no sé qué está pasando y he estado en esto durante 1 semana.
Estoy usando la versión de Chrome 101.0.4951.41.
Este es el repositorio del proyecto en GitHub .
2 answers
Answer question0
Es la propiedad del borde en la entrada: Chrome Mobile configura el fondo de las entradas de fecha y hora para que coincidan con el borde.
Supongo que le gustaría que todas sus entradas coincidieran, por lo que establecer un color de fondo en las entradas dentro de su formulario tendrá el efecto deseado:
background-color: #fff; También recomendaría no eliminar el outline , ya que se usa por razones de accesibilidad (lectores de pantalla).
Entonces todo tu estilo se vería así:
#form-field input { width: 100%; padding: 15px; border: 1px solid #a3a3a3; background-color: #fff; margin: 10px 0; }Las entradas de fecha y hora son relativamente nuevas y, por lo tanto, la compatibilidad con varios navegadores es complicada (Safari Mobile notoriamente no admitió un selector de fecha durante años). MDN tiene alguna guía sobre cómo detectar la compatibilidad del navegador.
0
Este problema se debe a los estilos de control nativos del navegador. Puede anularlo con la propiedad apariencia/webkit-appearance:none . después de que necesite darle su propio estilo al componente.
Haga más I+D en apariencia/apariencia de webkit y resolverá su problema.
He configurado appearance:none y veo el siguiente resultado. Es eliminar todas las flechas y hacer un cuadro de textbox simple
