<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
* {
margin: 0;
border: none;
position: relative;
}
body {
width: 100%;
height: 100%;
font-size: 100%;
}
form {
width: 50%;
margin: 0 auto;
text-align: center;
}
div.placeholder_cont {
width: 90%;
height: 3.6em;
margin: 2em auto;
background-color: rgb(255, 255, 255);
font: 1em Verdana;
border-radius: .5em;
border: .2em solid rgb(204, 204, 204);
background-clip: padding-box;
text-indent: 2%;
}
div.placeholder_cont > span.placeholder_txt {
height: 100%;
line-height: 3.6em; /* mismo tamaño que "height" de placeholder_cont*/
color: rgb(190, 190, 190);
text-shadow: 0 0 0;
display: block;
text-align: left;
}
div.placeholder_cont > span.placeholder_txt > strong {
color: rgb(0, 0, 0);
}
div.placeholder_cont > img {
width: 1.48%;
float: right;
top: 46%;
right: 3%;
}
div.placeholder_cont > input {
display: none;
}
ul.opciones {
left: -.16em;
visibility: hidden;
list-style-type: none;
width: 99.9%;
height: auto;
padding: 0;
background-color: rgb(255, 255, 255);
text-align: left;
border-width: 0 .2em .2em .2em;
border-style: solid;
border-color: rgb(204, 204, 204);
border-bottom-right-radius: 0.5em;
border-bottom-left-radius: 0.5em;
z-index: 100;
}
ul.opciones > li.defecto {
height: 1.7em;
padding-top: 1em;
border-bottom: 0.1em inset rgb(207, 202, 202);
color: rgb(190, 190, 190);
text-shadow: 0 0 0;
}
li.scrollerLateral {
height: 11.7em;
padding: .3em 0;
color: rgb(255, 255, 255);
border-top: 1px inset rgb(204, 204, 204);
}
li.scrollerLateral > div.scrollbarLatera {
position: absolute;
top: .3em;
left: 97.8%;
width: 1.8%;
display: inline;
z-index: 100;
}
li.scrollerLateral > div.scrollbarLatera > div.carrilLatera {
position: absolute;
left: 0;
top: 0;
width: 100%;
background-color: rgb(80, 69, 71);
border-radius: 1em;
border: .1em solid rgb(158, 158, 158);
}
li.scrollerLateral > div.scrollbarLatera > div.carrilLatera > div.barraLatera {
position: absolute;
left: .1em;
top: 1px;
width: 82%;
height: 0;
background-color: rgb(206, 206, 214);
border-radius: 1em;
}
li.scrollerLateral > div.scrollbarLatera > div.carrilLatera > div.barraLatera:hover {
cursor: auto;
}
div.lista {
width: 100%;
height: 100%;
overflow: hidden;
}
div.valorLista {
position: absolute;
width: 100%;
height: auto;
}
div.valorLista > ul {
height: 100%;
overflow: hidden;
list-style-type: none;
padding: 0;
}
div.valorLista > ul > li {
padding: .2em 0;
background-color: rgb(255, 255, 255);
color: rgb(0, 0, 0);
cursor:pointer;
text-indent: 2%;
white-space: nowrap;
}
div.valorLista > ul > li:first-child {
padding: .9em 0;
}
div.valorLista > ul > li > img {
width: 6.5%;
vertical-align: middle;
margin-right: 2%;
}
div.valorLista > ul > li:hover {
color: rgb(255, 102, 0);
}
@media screen and (max-width: 1024px) {
body {
font-size: 80%;
}
}
@media screen and (max-width: 860px) {
body {
font-size: 62.5%;
}
}
@media screen and (max-width: 650px) {
body {
font-size: 50%;
}
}
</style>
<script type="text/javascript">
var lib = {
EventoIE8 : function(elemento, nomevento, fnc) {
if (elemento.addEventListener) {
elemento.addEventListener(nomevento, fnc, false);
} else if (elemento.attachEvent) {
elemento.attachEvent('on' + nomevento, fnc);
}
},
EventoEliminarIE8 : function(elemento, nomevento, fnc) {
if (elemento.removeEventListener) {
elemento.removeEventListener(nomevento, fnc, false);
} else if (elemento.detachEvent) {
elemento.detachEvent('on' + nomevento, fnc);
}
},
cssComputado : function(obj, styleProp, psElem) {
if (obj == null) { return 0; }
if (window.getComputedStyle) {
var pseudoElem = psElem || null;
var valor = window.getComputedStyle(obj, pseudoElem)[styleProp];
} else if (obj.currentStyle) {
var valor = (/(em|%)/.test(obj.currentStyle[styleProp])) ? lib.cssComputadoIE8Pixel(obj, styleProp) : obj.currentStyle[styleProp];
}
return valor;
},
cssComputadoIE8Pixel : function(elem, prop) {
var value = elem.currentStyle[prop] || 0;
var Copy = elem.style.left;
var runtimeCopy = elem.runtimeStyle.left;
elem.runtimeStyle.left = elem.currentStyle.left;
elem.style.left = (prop === 'fontSize') ? '1em' : value;
value = elem.style.pixelLeft + 'px';
elem.style.left = Copy;
elem.runtimeStyle.left = runtimeCopy;
return value;
},
EventoCancelar: function(evt) {
var ev = evt || window.event;
if (ev.preventDefault) {
ev.preventDefault();
} else {
ev.returnValue = false;
}
},
EventoParar: function(evt) {
var ev = evt || window.event;
if (ev.stopPropagation) {
ev.stopPropagation();
} else {
ev.cancelBubble = true;
}
}
}
var EmularSelect = {
desplegarOpc: [],
recogerOpc: null,
prevObj: null,
prevOpc: null,
initEmularSelect: function() {
Array.prototype.forEach.call(document.querySelectorAll('.placeholder_cont'), function(obj, i) {
var opciones = obj.querySelector('.opciones');
var opcionesLista = obj.querySelector('.opcionesLista');
lib.EventoIE8(obj, 'click', EmularSelect.desplegarOpc[i] = function(event) {EmularSelect.MuestraOpciones(event, this, opciones, i);});
Array.prototype.forEach.call(opcionesLista.getElementsByTagName('LI'), function(op, n) {
lib.EventoIE8(op, 'mousedown', function(event) {EmularSelect.Pegar(event, this, opciones, n);});
});
scrollDiv.initscrollDiv(i);
});
/* FUNCIÓN COMENTADA
for (var i = 0, obj = document.querySelectorAll('.placeholder_cont'); i < obj.length; i++) {
(function(i) {
var opciones = obj[i].querySelector('.opciones');
var opcionesLista = obj[i].querySelector('.opcionesLista');
lib.EventoIE8(obj[i], 'click', EmularSelect.desplegarOpc[i] = function(event) {EmularSelect.MuestraOpciones(event, this, opciones, i);});
for (var n = 0, op = opcionesLista.getElementsByTagName('LI'); n < op.length; n++) {
(function(n) {
lib.EventoIE8(op[n], 'mousedown', function(event) {EmularSelect.Pegar(event, this, opciones, n);});
})(n);
}
scrollDiv.initscrollDiv(i);
})(i);
}
*/
},
MuestraOpciones: function(evt, obj, opciones, indiceObjeto) {
lib.EventoCancelar(evt);
lib.EventoParar(evt);
lib.EventoEliminarIE8(document, 'click', EmularSelect.recogerOpc);
lib.EventoIE8(document, 'click', EmularSelect.recogerOpc = function() {EmularSelect.Cerrar(opciones);});
opciones.style.visibility = 'visible';
opciones.parentNode.getElementsByTagName('IMG')[0].src = 'fh.gif';
if (EmularSelect.prevObj != null && EmularSelect.prevOpc != opciones) {
EmularSelect.prevOpc.style.visibility = 'hidden';
EmularSelect.prevOpc.parentNode.getElementsByTagName('IMG')[0].src = 'fv.gif';
}
EmularSelect.prevObj = obj;
EmularSelect.prevOpc = opciones;
},
Pegar: function(evt, _this, opciones, indiceOpcion) {
lib.EventoEliminarIE8(document, 'click', EmularSelect.recogerOpc);
if (indiceOpcion == 0) {
opciones.parentNode.getElementsByTagName('INPUT')[0].value = '';
opciones.parentNode.getElementsByTagName('SPAN')[0].textContent = _this.textContent;
} else {
opciones.parentNode.getElementsByTagName('INPUT')[0].value = _this.textContent;
opciones.parentNode.getElementsByTagName('SPAN')[0].innerHTML = '<strong>' + _this.textContent + '</strong>';
}
EmularSelect.Cerrar(opciones);
},
Cerrar: function(opciones) {
lib.EventoEliminarIE8(document, 'click', EmularSelect.recogerOpc);
opciones.style.visibility = 'hidden';
opciones.parentNode.getElementsByTagName('IMG')[0].src = 'fv.gif';
},
}