JSFiddle - React, Tailwind, and code Playground

HTML

<form method="" action=""> 

    <div class="placeholder_cont">
        <input type="text" name="coches" id="coches" value="" />
        <img src="EmularSelectconImagenes/fv.gif" />
        <span class="placeholder_txt">Modelo Coches</span>
        <ul class="opciones">
            <li class="scrollerLateral">
                <div class="scrollbarLatera">
                    <div class="carrilLatera">
                        <div class="barraLatera"></div>
                    </div>
                </div>
                <div class="lista">
                    <div class="valorLista">
                        <ul class="opcionesLista">
                            <li>Modelo Coches</li>
                            <li><img src="EmularSelectconImagenes/Adidas-D-Rose-773-II.jpg" />Seat Ibiza Turbo Dieel Injección GT World Rally Car</li>
                            <li><img src="EmularSelectconImagenes/Adidas-Lift-Off-2013.jpg" />Audi</li>
                            <li><img src="EmularSelectconImagenes/Adidas-Shake-Em-2.jpg" />Mercedes</li>
                            <li><img src="EmularSelectconImagenes/Nike-Atr-Max-Body-U.jpg" />Fiat</li>
                            <li><img src="EmularSelectconImagenes/Nike-Hyper-Quickness.jpg" />Citroen</li>
                            <li><img src="EmularSelectconImagenes/Reebok-G094-R300-The-Pump.jpg" />Alfa Romeo</li>
                        </ul>
                    </div>
                </div>
            </li>
        </ul>
    </div>

<br /><br /><br />

    <div class="placeholder_cont">
        <input type="text" name="motos" id="motos" value="" />
        <img src="EmularSelectconImagenes/fv.gif" />
        <span class="placeholder_txt">Modelo Motos</span>
        <ul class="opciones">
            <li class="scrollerLateral">
                <div class="scrollbarLatera">
                    <div class="carrilLatera">
                        <div class="barraLatera"></div>
                    </div>
               ...

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:...

JavaScript

var lib = {

    Evento : function(elemento, nomevento, fnc) {

        elemento.addEventListener(nomevento, fnc, false);
    },


    EventoEliminar : function(elemento, nomevento, fnc) {

        elemento.removeEventListener(nomevento, fnc, false);

    },


    cssComputado : function(obj, styleProp, psElem) {

        if (obj == null) { return 0; }

        var pseudoElem = psElem || null;
        var valor = window.getComputedStyle(obj, pseudoElem)[styleProp];

        return valor;
    },



    EventoCancelar : function(evt) {

        evt.preventDefault();

    },



    EventoParar : function(evt) { 

            evt.stopPropagation();
    }
}




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.Evento(obj, 'click', EmularSelect.desplegarOpc[i] = function(event) {EmularSelect.MuestraOpciones(event, this, opciones, i);});

            Array.prototype.forEach.call(opcionesLista.getElementsByTagName('LI'), function(op, n) {

               lib.Evento(op, 'mousedown', function(event) {EmularSelect.Pegar(event, this, opciones, n);});
            });

            scrollDiv.initscrollDiv(i);

        });

    },



    MuestraOpciones: function(evt, obj, opciones, indiceObjeto) {

        lib.EventoCancelar(evt);
        lib.EventoParar(evt);

        lib.EventoEliminar(document, 'click', EmularSelect.recogerOpc);
        lib.Evento(document, 'click', EmularSelect.recogerOpc = function() {EmularSelect.Cerrar(opciones);});

        opciones.style.visibility = 'visible';
        opciones.parentNode.getElementsByTagName('IMG')[0].src = 'EmularSelectconImagenes/fh.gif';

        if (EmularSelect.prevObj != null &&...