Select con varias opciones visibles y lo demás, desplegable

[kabe_jrr]

Hola amigos,

Estoy intentando construir un select que tenga 3 opciones visibles y que a partir de la cuarta opción sea ya un select normal, de 1 elemento con su flechita para desplegar a la derecha, pero no encuentro la forma de hacerlo.

Lo único que he encontrado, pero no es lo que quiero, es utilizar "size", pero como digo, no me sirve.

Es decir, lo que quiero es un select entero, con 3 opciones a la vista, y la cuarta opción ya como si fuera un select normal, pero que todo forme parte del mismo select (y la flechita habitual al lado de la cuarta opción únicamente).

Algo como esto, ¿se puede hacer?:

Código HTML:

<select name="loquesea">
<option value="valor1">Texto 1</option> <!--opcion visible-->
<option value="valor2">Texto 2</option> <!--opcion visible-->
<option value="valor3">Texto 3</option> <!--opcion visible-->
<option value="valor4">Texto 4</option> <!--aquí aparecería la flechita habitual del select-->
<option value="valor5">Texto 5</option> <!--opcion visible al desplegar con la flechita-->
<option value="valor6">Texto 6</option> <!--opcion visible al desplegar con la flechita-->
<option value="valor7">Texto 7</option> <!--opcion visible al desplegar con la flechita-->
</select> 

¿Es posible hacerlo? No sé si me he explicado correctamente...

Muchísimas gracias de antemano.

[kabe_jrr]

He intentado algo de este estilo, pero claro, no hace lo que quiero porque siempre devolverá el valor seleccionado en el último select (pero quizá da una idea de qué quiero obtener):

Código HTML:

<style>
.sinarrow {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: 0;
}
</style>
<div>
<select multiple size="1" name="select" class="sinarrow">
	<option>1</option>
</select>
</div>
<div>
<select multiple size="1" name="select" class="sinarrow">
	<option>2</option>
</select>
</div>
<div>
<select multiple size="1" name="select" class="sinarrow">
	<option>3</option>
</select>
</div>
<div>
<select name="select">
	<option>4</option>
	<option>5</option>
	<option>6</option>
</select>
</div> 

[ArturoGallegos]

Y si en lugar de un select utilizas un input hidden y una lista para simular el select

Con una lista <UL> + un poco de javascript podrías simular un select, utilizar el evento onclick en los <LI> para marcarlo como seleccionado y enviar el valor seleccionado al input

[kabe_jrr]

Hola, gracias por la respuesta.

Veo que hay información sobre cómo hacerlo como dices. ¿Pero cómo se podría poner la flechita típica de un select en un elemento que no sea el primero de la lista? Porque lo que a mí me gustaría conseguir es que los 3 primeros elementos de la lista estén siempre "a la vista" mientras que a partir del cuarto sea desplegable, pero que todo forme parte de un mismo "select" (o lista)

[ArturoGallegos]

Tienes que jugar con las reglas CSS, usa el pseudo elemento after de otro elemento o bien usa posiciones.

Todo es posible solo tienes que intentarlo una y otra vez., regresa con código y muéstranos avances, con gusto te apoyare e indicare que modificar.

Puedes usar http://jsfiddle.net/ para armar la demo y mostrarnos como vas.

[kabe_jrr]

Ay madre... Son conceptos que me quedan demasiado grandes de momento... nunca he llegado a usar ni controlar el before/after, y con los position siempre ando peleándome :s

[ArturoGallegos]

Nadie nace sabiendo, en su momento dije lo mismo que tu, pero solo es cuestión de estudiar la documentación y darle a prueba y error hasta que quede, la practica hace al maestro, así que a darle que para luego es tarde.

De ti dependerá si sale hoy, mañana o nunca.

[DragonX]

http://jsfiddle.net/kEnC9/ espero te sirva.
Slds.-

[kabe_jrr]

Muchas gracias, lo probaré.