function selectReplacement(obj) { obj.className += ' replaced'; var ul = document.createElement('ul'); ul.className = 'selectReplacement'; var opts = obj.options; var selectedOpt = (!obj.selectedIndex) ? 0 : obj.selectedIndex; 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 = i; 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); } obj.onfocus = function() { ul.className += ' selectFocused'; }; obj.onblur = function() { ul.className = 'selectReplacement'; }; obj.onchange = function() { var idx = this.selectedIndex; selectMe(ul.childNodes[idx]); }; obj.onkeypress = obj.onchange; obj.parentNode.insertBefore(ul,obj); } function selectMe(obj) { var lis = obj.parentNode.getElementsByTagName('li'); for (var i=0; i<lis.length; i++) { if (lis[i] != obj) { 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,val) { var obj = document.getElementById(objID); obj.selectedIndex = val; } function setForm() { var s = document.getElementsByTagName('select'); for (var i=0; i<s.length; i++) { selectReplacement(s[i]); } } window.onload = function() { };
Listę wywołuję
Style
select.replaced { width: 1px; position: absolute; left: -999em; margin: 0px; } ul.selectReplacement { background: url('images/select-top.jpg') top left no-repeat; margin: 0px; padding: 0; height: 15px; position: relative; } ul.selectFocused { background-image: url('images/top-focus.jpg'); } ul.selectReplacement li { background: #0f0f0f; color: #989898; cursor: pointer; display: none; font-size: 11px; list-style: none; margin: 0; padding: 2 0 0 8px; width: 57px; height: 16px; } ul.selectOpen { position: absolute; margin: 0; border: 1px solid #0f0f0f; } ul.selectOpen li { display: block; } ul.selectReplacement li.selected { background: url('images/select-bottom.png') bottom left no-repeat; color: #989898; display: block; } ul.selectOpen li.selected { background: #262626; border: 0; display: block; } ul.selectOpen li:hover, ul.selectOpen li.hover, ul.selectOpen li.selected:hover { background: #262626; color: #fff; }

~Refresh
Daje gdyż temat spadł na drugą stronę na którą mało kto wchodzi a nadal potrzebuję odpowiedzi...