Gracias hmbp22, me sirvió bastante tu sugerencia. Buscaba crear una función que me permita reemplazar los SELECT para poder personalizar como lucen, tal como pasa con muchos plugins para jQuery... pero sin jQuery.
Acá dejo mi demo completo, por si le sirve a alguien más:
Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es">
<head>
<title>Personalizar SELECT tag</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<meta http-equiv="Content-Language" content="es" />
<style type="text/css">
/* <![CDATA[ */
.desplegable input {
float: left;
width: 150px;
padding: 4px 8px;
border: solid 1px #DDD;
background-color: #FFF;
cursor: pointer;
}
.desplegable:hover ul { display: block; }
.desplegable ul {
position: absolute;
width: 168px;
max-height: 130px;
overflow-y: auto;
list-style: none;
margin: 24px 0 0 0;
padding: 0;
display: none;
}
.desplegable li {
padding: 4px 8px;
background-color: #DDD;
cursor: pointer;
}
.desplegable li:hover { background-color: #CCC; }
.desplegable li, .desplegable input { font: 12px/14px Arial,Helvetica,sans-serif; }
/* ]]> */
</style>
</head>
<body>
<span class="desplegable"><select id="select-engagement">
<option selected="selected" value="Elige uno">Elige uno</option>
<option value="Compromiso 1">Compromiso 1</option>
<option value="Compromiso 2">Compromiso 2</option>
<option value="Compromiso 3">Compromiso 3</option>
<option value="Compromiso 4">Compromiso 4</option>
<option value="Compromiso 5">Compromiso 5</option>
<option value="Compromiso 6">Compromiso 6</option>
<option value="Compromiso 7">Compromiso 7</option>
<option value="Compromiso 8">Compromiso 8</option>
<option value="Compromiso 9">Compromiso 9</option>
<option value="Compromiso 10">Compromiso 10</option>
<option value="Compromiso 11">Compromiso 11</option>
<option value="Compromiso 12">Compromiso 12</option>
<option value="Compromiso 13">Compromiso 13</option>
<option value="Compromiso 14">Compromiso 14</option>
<option value="Compromiso 15">Compromiso 15</option>
<option value="Compromiso 16">Compromiso 16</option>
<option value="Compromiso 17">Compromiso 17</option>
<option value="Compromiso 18">Compromiso 18</option>
<option value="Compromiso 19">Compromiso 19</option>
<option value="Compromiso 20">Compromiso 20</option>
</select></span>
<script type="text/javascript">
/* <![CDATA[ */
function xOb (ob)
{
return (typeof ob == 'string') ? document.getElementById(ob) : ob;
};
function xTg (ob,tg)
{
return xOb(ob).getElementsByTagName(tg);
};
function xText (ob)
{
var t = document.getElementsByTagName('body')[0], o = xOb(ob);
return (t.innerText != undefined) ? o.innerText : o.textContent;
};
function customSelect (id)
{
var slt = xOb(id), sltPrn = slt.parentNode, sltVal = slt.value, ops = xTg(slt,'option');
var txt = document.createElement('input');
txt.type = 'text';
txt.value = sltVal;
txt.readOnly = true;
sltPrn.replaceChild(txt,slt);
var ul = document.createElement('ul');
sltPrn.appendChild(ul);
for (var x = 1, c = ops.length; x < c; x++)
{
var li = document.createElement('li');
li.innerHTML = xText(ops[x]);
li.val = xText(ops[x]);
li.onclick = function(){ txt.value = this.val; };
ul.appendChild(li);
};
};
customSelect('select-engagement');
/* ]]> */
</script>
</body>
</html>