CUSTOM DROPDOWN USING OVERFLOW

Includes option style and disallowed selection(s) by class

by Christopher O

HTML

<select id="pq">
    <option>Apples</option>
    <option selected="selected" class="fullpay">Pineapples</option>
    <option class="oldoption">Chocklate</option>
    <option>Pancakes</option>
</select>

<input type="button" id="bla" value="Check fullpay" />

<br /><br />
<div id="output"></div>

CSS

select {
   margin: 50px;
    border: 1px solid #111;
   background: transparent;
   width: 150px;
   padding: 5px 35px 5px 5px;
   font-size: 16px;
   border: 1px solid #ccc;
   height: 34px;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
    background: url(http://www.stackoverflow.com/favicon.ico) 96% / 15% no-repeat #eee;
} 
/*target Internet Explorer 9 and Internet Explorer 10:*/
@media screen and (min-width:0\0) { 
    select {
        background:none;
        padding: 5px;
    }
}

.oldoption {
    color:#ccc;
}

JavaScript

var last = $('#pq').val(); // for demo purposes

// PQ update (only allow active options)
$(document).on('change', '#pq', function(e){
	
	var select = e.target;
	var option = select.options[select.selectedIndex]; // check the option not the select
	
	if($(option).hasClass('oldoption')){
		alert('Nice try! No "' + $('#pq').val() + '" for you');
    $('#pq').val(last);
	}else{
		last = $('#pq').val();
	}
});

$(document).on('click', '#bla', function(){    
    if($('#pq option:selected').hasClass('fullpay')){
		$('#output').html('Is fullpay');
	}else{
		$('#output').html('NOT fullpay');
	}
});