Seleccionar opción de cuadro-lista aparece fuera de la página en Chrome

He creado una lista de select con PHP, y al hacer clic para seleccionar una opción del menú desplegable, la lista de opciones salta a la parte superior de la página y muestra alrededor de 3 opciones, y el rest está fuera de la página.

Solo sucede en Chrome. ¿Hay alguna manera de arreglar esto usando CSS?

Aquí está el código relevante:

HTML

      <option value="">      

CSS

 #productFormContentWrapper select { margin: 0; padding: 0; color: #9d1116; font-size: 18px; padding: 3px; } 

De acuerdo con Mozilla Developer Network:

Si el control se presenta como un cuadro de lista desplazado, este atributo representa el número de filas en la lista que deberían estar visibles al mismo tiempo. Los navegadores no están obligados a presentar elementos seleccionados como un cuadro de lista desplazado.

Simplemente omita el atributo de size o establezca su valor en 0 (o 1 , si sigue las especificaciones de HTML5, pero esto aparentemente causa problemas heredados, así que evítelo por el momento).

Vea una demostración en vivo en jsFiddle .

Referencias

  • Elemento select en MDN