Desplegable de Android (Seleccionar) CSS

Actualmente estoy escribiendo algunas hojas de estilo para navegadores móviles y he encontrado un problema extraño en el navegador de Android. Al cambiar el atributo CSS de tamaño de fuente de un cuadro de texto, el cuadro se hace más grande para acomodar el texto más grande. Hacer esto en un cuadro de selección, sin embargo, no cambia el tamaño del cuadro de selección, pero el texto aún se hace más grande (en realidad se superpone a la parte superior e inferior del elemento del formulario representado).Desplegable de Android (Seleccionar) CSS

¿Alguien me puede decir si es posible aumentar el alto de las casillas de selección en el navegador Android? O, si no, apúntame en la dirección de una lista de atributos CSS que se pueden aplicar a ellos.

Gracias.

Fuente

2009-08-17 roguepixel

¿Seguro que no hay altura que se aplica en otro lugar, la herencia de otra entrada, o forma, el elemento? –

Sí, estoy seguro de eso, he echado un vistazo a los elementos en firebugs inspector en firefox para estar seguro. – roguepixel

Esto parece ser un error del navegador. También puede reproducirlo cuando configure el tamaño del texto de su navegador en "enorme" (en la configuración). He añadido una new issue y sugerir una solución alternativa una imagen de fondo personalizada por ahora:

<select style="background: url('big-select-bg.png')"/>

Fuente

2009-08-18 12:29:26

Gracias Josef, me alegra que alguien más pueda reproducir el error y no solo yo. Afortunadamente, se puede encontrar una solución fácil. – roguepixel

un poco más de información general sobre el comportamiento de selección de androides se puede encontrar aquí: http://stackoverflow.com/questions/14744437/html-select-box-not-showing-drop-down-arrow-on-android-version-4 -0-when-set-with – escapedcat

establecer la opacidad del control de selección a 0

A continuación, coloque riguroso control del lapso de estilo para parecerse un cuadro de texto detrás del control de selección para que el control de selección se encuentre directamente en la parte superior del tramo.

El usuario no verá el control de selección pero cuando el usuario intente ingresar texto en el lapso, aparecerán las opciones desplegables para el control de selección.

Después de que el usuario hace su selección, use javascript para actualizar el innerHTML del tramo con el valor del control de selección.

Asegúrese de que las dimensiones del tramo y el control de selección estén bien alineados. (no utilizar un control TexBox real)

mealaroni.com

Fuente

2010-04-30 20:13:57 Bjhamltn

Otra opción que puede utilizar (probado en Galaxy S con Android versión 2.1-Update1):

select { 
    -webkit-appearance: listbox; 
} 
select, input { 
    width: 100%; 
    height: 40px; 
    line-height:40px; 
    border: 1px solid #999; 
    border-radius: 6px; 
    margin-bottom:10px; 
}

De esta manera las entradas y selecciona que todos tengan el mismo aspecto, al hacer clic en Seleccionar se abrirá el menú de opciones como de costumbre.

Fuente

2010-10-21 10:08:08 Dror

la propiedad -webkit-appearance es lo que lo solucionó. ¡Gracias! – imorsi

Gracias, guardado sea el tiempo :) – simoncereska

gracias - trabajado para mí también – Martin

prueba este:

select{ 

    -webkit-appearance: menulist-text; 
}

Fuente

2012-12-23 10:27:24

Eso realmente soluciona muchos problemas con la altura y el ancho de las entradas de selección en todos los dispositivos webkit. Algunos han sugerido 'botón menulista', pero este parece funcionar en todo momento. ¡Gracias! – marksyzm

¡¡¡bienvenido !!! –

Para mí "webkit-apariencia: cuadro de lista;" resuelto el problema no completamente.

he tenido que añadir un atributo de relleno además:

select { 
    -webkit-appearance: listbox; 
    width: 100%; 
    height: 35px; 
    line-height: 35px; 
    border: 1px solid #bbb; 
    border-radius: 4px; 
    padding: 0 0 1px 8px; 
}

Fuente

2014-02-02 15:57:25 Marcus

Desplegable de Android (Seleccionar) CSS

Respuesta

Cuestiones relacionadas