0

Mi input type search se desforma en el navegador de mozilla firefox mientras que en Google Chrome y los demás navegadores se muestra sin problemas y desconozco la causa del porque sucede esto.

Estoy trabajando con el Framework de estilos MaterializeCSS y decidí personalizar un poco el input type search debido a que no me gusta el diseño que este trae por defecto y escribí solo un poquito de estilos CSS para darle un mejor aspecto.

Este es el estilo con el que personalice al search

/* Input de buscador */
.input-field input[type=search] {
  padding: 10px 10px !important;
  margin: 12px 3.3rem !important;
  border: 1px solid black !important;
}

Este es el aspecto que tiene el sitio web en Firefox

Aspecto del buscador en Firefox

Espero me puedan ayudar, un saludo

5
  • ¿Porqué le das un padding absoluto? Te sugiero probar con la unidad rem. Commented el 31 ago. 2021 a las 17:54
  • Y con eso se solucionaría mi error? Commented el 31 ago. 2021 a las 18:01
  • Tienes que ir probando diferentes medidas de padding y diferentes resoluciones, de esta forma tu input será responsivo. Tal como está ahora, y sin ver el resto de reglas CSS es difícil determinar si eso soluciona el problema. A simple vista, estás metiendo un padding de 10px en top y 10px en bottom. Si la resolución de tu pantalla tiene 1280px de alto, quitando el espacio de la barra superior e inferior, digamos que tienes 1000px de viewport, estás asignando 1% de espacio entre el borde superior de tu input y el texto y 1% de espacio en la parte inferior. Commented el 31 ago. 2021 a las 18:15
  • normalizaste lo valores predeterminados de tu pagina primero antes de aplicarle el ccs? intenta normalizar los valores primero con necolas.github.io/normalize.css Commented el 31 ago. 2021 a las 18:15
  • Si reduces el tamaño de la ventana del navegador, digamos que te quedan 800px de altura en el viewport, entonces estás asignando ahora 1.25% de espaciado. Es por ello que una medida absoluta no es amiga del diseño responsivo, excepto en casos muy específicos, y el tuyo no es uno de estos. Por lo tanto, debes jugar con las Media Queries y usar medidas relativas, como rem. Saludos Commented el 31 ago. 2021 a las 18:19

2 respuestas 2

1

En realidad la solución a este problema es sencillo pero no todos conocen. Existe un comando en CSS que es para especificar que una regla es única y exclusivamente para un navegador y en este caso al tu no estas usando normalice puedes aplicar esta regla y dentro de ella escribir la misma reglas que usaste para que se vea así en todos los navegadores pero puedes editar las propiedades para que esta se ajuste única y exclusivamente a Firefox

El código de que te hablo es:

@-moz-document url-prefix() {
   /* Input de buscador */
   .input-field input[type=search] {
      padding: 10px 10px !important;
      margin: 12px 3.3rem !important;
      border: 1px solid black !important;
   }
}

Colócalo de esta forma en tu hoja de estilos CSS y solo ponte a jugar con las propiedades hasta que tu input search encaje perfectamente en el header de tu sitio o hasta lograr verse como a ti te gustaría y lo puedes hacer sin temor ya que estos cambios serán única y exclusivamente para mozilla firefox y en otros navegadores se seguirá mostrando como antes.

0

Puedes simplemente agregar max-height al css donde tienes el elemento y le estableces el valor que se ajuste a los navegadores que usas.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.