personalizar DHTML pseudo select

[AlZuwaga]

Hola, estoy usando el pseudo select de http://slayeroffice.com/code/dhtml_select.html

Como ven en la siguiente imagen, el fondo azul de los enaces al "hover" se extiende hasta donde finaliza la palabra:


Le coloqué al estilo display:block para que el hover se "extienda" al 100% de "la caja" como se ve a continuación:


pero... como ven, se separa cada elemento! Y el problema es que ya no sé qué tocar para que "se junten" :(

El código modificado por mi es el siguiente (en negrita el display:block agregado):

Estilos:

Código:

<style type="text/css">
#dhtml_select { 
	font-family:verdana;
	font-size:10px;
	width:120px;
	height:18px;
	border-style:inset;
	border-width:2px;
	position:relative;
}

.m_dhtml_select_options {
	position:relative;
	left:-116px;
	background-color:#FFFFFF;
	padding:2px;
	text-align:left;
	border-style:none;
}

.dhtml_href {
	width:100%;
	display:block;
	height:18px;
	margin:0px;
	padding:0px;
}
.dhtml_href:link { color:#000000;text-decoration:none;}
.dhtml_href:visited { text-decoration:none;color:#000000;}
.dhtml_href:hover {
	text-decoration:none;
	color:#FFFFFF;
	background-color:darkblue;
}
.dhtml_href:active { text-decoration:none;}
#dhtml_select_dummy {
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	padding:2px;
	text-align:left;
 }
</style>

Javascript:

Código:

<script language="javascript">
// this array controls the values and text for the options. The first values is the text, the second is the value.
//dhtml_optionsArray = new Array(<% i = 1 : While Not RsK.EOF %>["<% = RsK("Keywords") %>","<% = RsK("Keywords") %>"]<% If i < RsK.RecordCount then %>,<% End if %><% RsK.MoveNext : i = i + 1 : Wend %>);
dhtml_optionsArray = new Array(["option 1",1],["option 2",2],["option 3",3],["option 4",4]);
isExpanded = false;
clicked = false;

//constants
// these match the properties as defined in the style sheet.
FONT_SIZE = 10;
SELECT_HEIGHT = 18;
SELECT_WIDTH = 230;

function buttonClicked() {
	xDoc = document.getElementById;
	obj = document.getElementById("dhtml_select_options");
	if(!isExpanded) {
		obj.style.display="block";
		isExpanded = true;
		if(!clicked) {
			clicked=true;
			obj.style.position = "absolute";
			obj.style.top = (obj.style.top+SELECT_HEIGHT) + "px";
			obj.style.width = SELECT_WIDTH + "px";
			obj.style.borderStyle = "solid";
			obj.style.borderWidth="1px;";
			rPadding = dhtml_optionsArray.length*2;
			obj.style.height = (((dhtml_optionsArray.length) * FONT_SIZE) + rPadding) + "px";
			mHTML = "";
			for(i=0;i<dhtml_optionsArray.length;i++)mHTML += "<a class=\"dhtml_href\" href=\"javascript:handleSelect(" + i + ");\">" + dhtml_optionsArray[i][0] + "</a><br>";
			obj.innerHTML += mHTML;
		}
	} else {
		document.getElementById("dhtml_select_dummy").style.display="block";
		obj.style.display="none";
		isExpanded = false;
	}
	
}

function handleSelect(mID) {
	isExpanded = false;
	document.forms.frm1.dhtml_select_value.value =  dhtml_optionsArray[mID][1];
	document.getElementById("dhtml_select_dummy").innerHTML = dhtml_optionsArray[mID][0];
	document.getElementById("dhtml_select_dummy").style.display="block";
	document.getElementById("dhtml_select_options").style.display="none";
}

function doCover() {
	if(document.getElementById("cover").style.display == "block") {
		document.getElementById("cover").style.display = "none";
	} else {
		document.getElementById("cover").style.display = "block";
	}
}
</script>

HTML:

Código:

<div id="dhtml_select">
	<img onClick="buttonClicked();" src="dhtml_select_button.gif" style="position:absolute;top:0px;left:104px;z-index:10;">
	<div id="dhtml_select_dummy">Seleccione</div>
	<div id="dhtml_select_options" class="m_dhtml_select_options"></div>
</div>

No sé si el problema este en el CSS o en alguna de las funciones de JS (que si es ésto último, estoy más cagado aun )

Si alguien sabe qué tocar...
Gracias!

[baccxus]

Código:

.dhtml_href {...
	height:18px;...

Quitaselo para que quede en automático

Saludos,

[AlZuwaga]

Hola baccxus, mañana lo intentaré porque no tengo los archivos aquí (podría usar los códigos colocados en mi mensaje, pero la verdad que a ésta hora ya no tengo ganas de nada más que tomarme una cerveza bien fría mientras despejo de código mi cabeza)

Igual, aunque no estoy 100% seguro, creo que el height, margin y padding se lo agregué luego de que al colocar display:block me encentré con ese inconveniente.

Veremos mañana ;)

[AlZuwaga]

Mmm... pues no, es sólo cuestión de agregar el display:block para que se desarme todo.

No habrá nada que hacerle?
Igual no es taaaaaannn necesario, sólo para "emular" lo más posible a un <select>

[JavierB]

Hola Al Zuwaga

Creo que te servirá poniendo un margen negativo:

.dhtml_href { width:100%;display:block;margin-bottom:-10px}

Saludos,

[AlZuwaga]

Retomo el tema luego de varios días que estuve dedicado a otras cuestiones y no tengo más que agradecerte, JavierB. Funcionó perfecto!

Juraría que eso lo había intentado... pero parece que no ;)
La única modificación que le hice a tu aporte es que el margin-bottom debe ser de -12px en vez de -10 (sinó me ocurría que la "lista" de opciones era más extensa que el su contenedor blanco, pero con -12 queda perfecto)

Gracias!

[JavierB]

De nada, me alegro de que te haya funcionado. lo de -10 lo puse como ejemplo, sabía que entenderías la idea