<apex:page standardController="Account">
    <style>
        ul.myCustomPicklist
        {
        min-width:175px;
        -webkit-appearance: menulist;
        display:inline-block;
        color: black;
        background-color: white;
        border:1px solid rgb(169, 169, 169);
        padding:0 15px 0 0;
        position:relative;
        overflow-y:hidden;
        }
        ul.myCustomPicklist.open
        {
        -webkit-appearance: initial;
        padding:0;
        }
        ul.myCustomPicklist > li[data-selected="true"] { display:list-item; }
        ul.myCustomPicklist > li[data-selected="false"] { display:none; }
        ul.myCustomPicklist.open > li[data-selected="false"] { display:list-item; }
        
        ul.myCustomPicklist > li
        {
        cursor:pointer;
        list-style:none;
        margin:0;
        padding:2px 2px 1px;
        position:relative;
        }
        
        ul.myCustomPicklist.open > li:hover
        {
        color:white;
        background-color:#36A0FE;
        }
    </style>
    <script>
    window.onload = function(){
        var formId = document.getElementById('{!$Component.myForm}').getAttribute('id');
        var inputHidden = document.getElementById(formId+':myHiddenField');
        var uList = document.getElementById('myCustomPicklist');
        uList.addEventListener('click', function(){ OpenCloseList(this) });
        var listItems = document.getElementsByClassName('listItem');
        var colors = ['#808080','#A52A2A','#0000FF','#FFA500','#FF0000','#008000'];
        for(var i=0; i<listItems.length; i++){
            listItems[i].addEventListener('click', function(){
                if(this.getAttribute('data-selected') != 'true'){
                    var listItemsToUpdate = document.getElementsByClassName('listItem');
                    for(var j=0; j<listItemsToUpdate.length; j++){
                        listItemsToUpdate[j].setAttribute('data-selected', 'false');
                    }
                    this.setAttribute('data-selected', 'true');
                    var listHTML = this.innerHTML;
                    listHTML = listHTML.replace(/<span style=\"color:#[a-zA-Z0-9]{6}\">|<\/span>|<strong>|<\/strong>/gi,'');
                    listHTML = listHTML.replace(/\s\|\s/gi,'|');
                    inputHidden.value = listHTML;
                }
            });
            var str = listItems[i].innerHTML;
            var strArray = str.split('/');
            var strHTML = '';
            for(var j=0; j<strArray.length; j++){
                strHTML += '<span style="color:'+colors[j]+'">'+strArray[j]+'</span><strong> | </strong>';
            }
            strHTML = strHTML.slice(0, -21);
            listItems[i].innerHTML = strHTML;
        }
    }
    function OpenCloseList(elem){
        var classAttr = elem.getAttribute('class');
        if(classAttr.match(/open/gi) != null){
            elem.setAttribute('class', classAttr.replace('open', '').replace(' ',''));
        }else{
            elem.setAttribute('class',classAttr+' open');
        }
    }
    </script>
    <apex:form id="myForm">
        <apex:inputHidden value="{!Account.Type}" rendered="true" id="myHiddenField"/><br/>
        <ul class="myCustomPicklist" id="myCustomPicklist">
            <li class="listItem" data-selected="true">--None--</li>
            <li class="listItem" data-selected="false">BUY/Site Section/Page/Ad Unit/Targeting/Device</li>
            <li class="listItem" data-selected="false">RENT/Site Section/Page/Ad Unit/Targeting/Device</li>
        </ul>
    </apex:form>
</apex:page>