Encontré en la web un sistema para dar estilos al select de un formulario MUY INTERESANTE Y SENCILLO.
Solo le veo un problemilla, y es cuando la lista menu contiene muchos valores se hace imuy larga.
Lo que no puedo es modificarlo para, que cuando despliegue este menu largo, ponerle un scroll y no me llene la pagina:
Os dejo el script completo para ver si podeis ayudarme:
Código:
<style type="text/css">
input {
background: url(imagenesdiseno/top.gif) top left no-repeat;
border: 0;
font-size: 11px;
color:#fff;
height: 24px;
width: 170px;
padding: 4px 12px;
}
label {
display:inline;
font-weight: bold;
color: #666;
}
select {
display: inline;
width: 300px;
}
select.replaced {
display: none;
}
ul.selectReplacement {
background: url(imagenesdiseno/top.gif) top left no-repeat;
margin: 0;
padding: 0;
height: 1.95em;
width: 170px;
font: 80% "Trebuchet MS", verdana, helvetica, arial, sans-serif;
}
ul.selectReplacement li {
background: #3399ff;
color: #fff;
cursor: pointer;
display: none;
font-size: 11px;
line-height: 0.8em;
list-style: none;
margin: 0;
padding: 8px 12px;
}
ul.selectOpen li {
display: block;
}
ul.selectReplacement li.selected {
background: url(bottom.gif) bottom left no-repeat;
color: #fff;
display: block;
}
ul.selectOpen li.selected {
background: #3399ff;
display: block;
}
ul.selectOpen li:hover,
ul.selectOpen li.hover,
ul.selectOpen li.selected:hover {
background: #9e0000;
color: #fff;
}
</style>
<script type="text/javascript">
function selectReplacement(obj) {
// append a class to the select
obj.className += ' replaced';
// create list for styling
var ul = document.createElement('ul');
ul.className = 'selectReplacement';
var opts = obj.options;
for (var i=0; i<opts.length; i++) {
var selectedOpt;
if (opts[i].selected) {
selectedOpt = i;
break;
} else {
selectedOpt = 0;
}
}
for (var i=0; i<opts.length; i++) {
var li = document.createElement('li');
var txt = document.createTextNode(opts[i].text);
li.appendChild(txt);
li.selIndex = opts[i].index;
li.selectID = obj.id;
li.onclick = function() {
selectMe(this);
}
if (i == selectedOpt) {
li.className = 'selected';
li.onclick = function() {
this.parentNode.className += ' selectOpen';
this.onclick = function() {
selectMe(this);
}
}
}
if (window.attachEvent) {
li.onmouseover = function() {
this.className += ' hover';
}
li.onmouseout = function() {
this.className =
this.className.replace(new RegExp(" hover\\b"), '');
}
}
ul.appendChild(li);
}
//*****PARA QUE DESAPAREZCA LA DIV AL LEVANTAR EL RATON*****
// ul.onmouseout = function(e) {
//if (!e) var e = window.event;
//var relTarg = e.relatedTarget || e.toElement;
//if (relTarg.nodeName != 'LI'){
//closeList (ul);
//}
//}
// add the input and the ul
obj.parentNode.appendChild(ul);
}
function selectMe(obj) {
var lis = obj.parentNode.getElementsByTagName('li');
for (var i=0; i<lis.length; i++) {
if (lis[i] != obj) { // not the selected list item
lis[i].className='';
lis[i].onclick = function() {
selectMe(this);
}
} else {
setVal(obj.selectID, obj.selIndex);
obj.className='selected';
obj.parentNode.className =
obj.parentNode.className.replace(new RegExp(" selectOpen\\b"), '');
obj.onclick = function() {
obj.parentNode.className += ' selectOpen';
this.onclick = function() {
selectMe(this);
}
}
}
}
}
function setVal(objID, selIndex) {
var obj = document.getElementById(objID);
obj.selectedIndex = selIndex;
}
function setForm() {
var s = document.getElementsByTagName('select');
for (var i=0; i<s.length; i++) {
selectReplacement(s[i]);
}
}
function closeSel(obj) {
// close the ul
}
window.onload = function() {
(document.all && !window.print) ? null : setForm();
}
// Close the list making the last selection visible as selected object
//function closeList(obj) {
//var lis = obj.getElementsByTagName('li');
//for (var i=0; i<lis.length; i++) {
//if (lis[i].className =='') { // not the selected list item
//lis[i].className='';
//lis[i].onclick = function() {
//selectMe(this);
//}
//} else {
//setVal(lis[i].selectID, lis[i].selIndex);
//lis[i].className='selected';
//obj.className =
//obj.className.replace(new RegExp(" selectOpen\\b"), '');
//lis.onclick = function() {
//obj.className += ' selectOpen';
//this.onclick = function() {
//selectMe(this);
//}
//}
//}
//}
//}
</script>
<link href="estilos_sub.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form action="restaurantes_en.php" method="get">
<label></label>
<label></label>
<label></label>
<table width="20%">
<tr>
<td valign="top"><select name='verprovincia' id='verprovincia' >
<option value="" selected="selected"> Elija una provincia </option>
<option value="Alava"> Alava </option>
<option value="Albacete"> Albacete </option>
<option value="Alicante"> Alicante </option>
<option value="Almería"> Almería </option>
<option value="Asturias"> Asturias </option>
<option value="Avila"> Avila </option>
<option value="Badajoz"> Badajoz </option>
<option value="Baleares "> Baleares </option>
<option value="Barcelona"> Barcelona </option>
<option value="Burgos"> Burgos </option>
<option value="Cáceres"> Cáceres </option>
<option value="Cádiz"> Cádiz </option>
<option value="Cantabria"> Cantabria </option>
<option value="Castellón/Castelló"> Castellón/Castelló </option>
<option value="Ceuta"> Ceuta </option>
<option value="Ciudad Real"> Ciudad Real </option>
<option value="Córdoba"> Córdoba </option>
<option value="La Coruña"> La coruña </option>
<option value="Cuenca"> Cuenca </option>
<option value="Girona"> Girona </option>
<option value="Granada"> Granada </option>
<option value="Guadalajara"> Guadalajara </option>
<option value="Guipúzcoa"> Guipúzcoa </option>
<option value="Huelva"> Huelva </option>
<option value="Huesca"> Huesca </option>
<option value="Jaén"> Jaén </option>
<option value="León"> León </option>
<option value="Lleida"> Lleida </option>
<option value="Lugo"> Lugo </option>
<option value="Madrid"> Madrid </option>
<option value="Málaga"> Málaga </option>
<option value="Melilla"> Melilla </option>
<option value="Murcia"> Murcia </option>
<option value="Navarra"> Navarra </option>
<option value="Ourense"> Ourense </option>
<option value="Palencia"> Palencia </option>
<option value="Las Palmas de Gran Canarias"> Las Palmas de Gran Canarias </option>
<option value="Pontevedra"> Pontevedra </option>
<option value="La Rioja"> La Rioja </option>
<option value="Salamanca"> Salamanca </option>
<option value="Santa Cruz de Tenerife"> Santa Cruz de Tenerife </option>
<option value="Segovia"> Segovia </option>
<option value="Sevilla"> Sevilla </option>
<option value="Soria"> Soria </option>
<option value="Tarragona"> Tarragona </option>
<option value="Teruel"> Teruel </option>
<option value="Toledo"> Toledo </option>
<option value="Valencia/València"> Valencia/València </option>
<option value="Valladolid"> Valladolid </option>
<option value="Vizcaya"> Vizcaya </option>
<option value="Zamora"> Zamora </option>
<option value="Zaragoza"> Zaragoza </option>
</select></td>
</tr>
</table>
</form>
</body>
</html>
