Hola
vito_gris :
Me costó un poco leer tu mensaje. Pero no entenderlo. Supongo que con ésto debe ser suficiente.
El
select es uno de los elementos que se trae más problemas : por su especie de "posición relativa" con el
z-index más alto del documento, porque no acepta
title, porque tiene un botón que ignora la función
click(), porque no interpreta algún que otro evento ...
Cuando me canso de pelear con él, termino reemplazándolo con otros métodos que, de preferencia, se le parezcan; ya que todos estamos acostumbrados a desplegar opciones y pincharlas, y cambiar de sistema sólo por hacer un diseño original no siempre es negocio.
Pero volviendo a tu pregunta, me surge una duda ¿para qué usas el
select ?. Si es para dejar fijo un campo de formulario, no sirve de nada "reducirlo", porque se tiene que leer en alguna parte y eso ya te ocupa todo el ancho de la opción; pero si es para ir a otro formulario, documento o sitio quizá se pueda hacer algo.
Para comenzar, si propones darle
tooltips (
title ) es porque el
select no podrá ocupar más espacio, pero otros elementos sí pueden flotar
sobre el documento ocultando una parte. Como mencioné más arriba, el
title no sirve; pero se puede simular uno con capas.
Por otro lado, si puedes poner un mensaje en una capa, también puedes poner el
select en una capa o en una ventana
pop-up.
Una más sería cambiar el tamaño del
select cuando no se lo va a usar, pero ésto depende mucho del diseño de tu página.
Código:
<html>
<head>
<title> SELECT's.</title>
<script language="javascript">
function Descrip(){
document.getElementById('dscr').style.display = 'none'}
</script>
</head>
<body bgcolor=silver>
<h2>Reducir <tt>select</tt>.</h2>
<form name=frm>
<span onmouseout="setTimeout('Descrip()',3000)"
style="font:12px sans-serif; position:absolute; width:65px">
<select style="font:12px sans-serif; width:40px"
onmousedown="document.getElementById('dscr').style.display=
'inline'" onchange="Descrip()" onblur="Descrip()">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select><span id=dscr style="display:none; padding:0 5px;
margin-left:40px; float:right; background:infobackground;
border:1px solid infotext"> uno<br>dos<br>tres<br>cuatro<br>cinco
</span></span>
</form>
<p style=margin-top:60px>En el primer ejemplo de <i>tooltip</i>
aparece junto al desplegable una descripción de cada ítem, que
se borra en 3 segundos o cuando se cambia el valor
seleccionado. Para ver nuevamente la descripción, se puede
arrastrar el <i>mouse</i> sobre el desplegable y soltar el
botón en la opción elegida.
<p>.<p>
<input type=button value=">"
onclick="document.getElementById('opciones').style.display=
'inline'">
<select id="opciones" style="display=none; position:relative;
width:100px; margin-right:-100px" onblur="this.style.display='none'"
onchange="this.style.display='none'" >
<option>1_UNO</option>
<option>2_DOS</option>
<option>3_TRES</option>
<option>4_CUATRO</option>
<option>5_CINCO</option>
</select> <b>Click para ver el <tt>select</tt> .</b>
<p>En el segundo ejemplo el <tt>select</tt> se despliega con un
botón y se oculta con <tt>onchange</tt> o con <i>click</i> en
cualquier lugar de la página.
<p>.<p>
<select onfocus="this.style.width=''" onblur="this.style.width='40px'"
onchange="this.style.width='40px'" style="width:40px">
<option selected>1 _UNO</option>
<option>2 _DOS</option>
<option>3 _TRES</option>
<option>4 _CUATRO</option>
<option>5 _CINCO</option>
</select>
<select onfocus="this.style.width=''" onblur="this.style.width='23px'"
onchange="this.style.width='23px'" style="width:23px">
<option selected>1 _UNO</option>
<option>2 _DOS</option>
<option>3 _TRES</option>
<option>4 _CUATRO</option>
<option>5 _CINCO</option>
</select>
<select onfocus="this.style.width=''" onblur="this.style.width='22px'"
onchange="this.style.width='22px'" style="width:22px">
<option selected>1 _UNO</option>
<option>2 _DOS</option>
<option>3 _TRES</option>
<option>4 _CUATRO</option>
<option>5 _CINCO</option>
</select>
<p>
En los últimos ejemplos el <tt>select</tt> cambia de tamaño;
aunque necesita varios <i>clicks</i> para mostrarse, ocultarse
y cambiar de opción.
</body>
</html>
Por último, éstas son todas soluciones desesperadas, todas tienen sus limitaciones y todas se deberán adaptar a tus necesidades. Espero que alguna te ayude.
Ah!; casi me olvido. Los probé solamente en
IE 5.5.
Saludos
furoya
Todo sobre colores Alt en un <select>