If we were to code what you ask in pure JS: FIDDLE
<div id="fakeSelect">
<div id="selectBox"></div>
<ul id="selectOptionsBox">
<li>Manni</li>
<li>Manni - Haraldarmanni</li>
<li>Manni - <b>Hornafjarðarmanni</b></li>
<li>Manni - Laugarvatnsmanni</li>
<li>Marglita hálfmáninn</li>
<li>Marglita klukkan</li>
<li>Marías</li>
<li>Mausel</li>
<li>Málverkasafnið</li>
<li>Mexíkanskur veltipóker</li>
<li>Miklar hindranir</li>
<li>Monte Carlo</li>
</ul>
</div>
#fakeSelect {
user-select: none;
-webkit-user-select: none;
}
#selectBox {
width: calc(200px - 4px);
border: 1px solid silver;
padding: 2px;
cursor: default;
font: 13px Arial, sans-serif;
position: relative;
}
#selectBox:hover {
border: 1px solid gray;
}
#selectBox::after {
position: absolute;
content: "▼";
font-size: .8em;
right: 5px;
top: 5px;
}
#selectOptionsBox {
list-style: none;
margin: 0;
padding: 0;
width: 200px;
border: 1px solid silver;
border-top: none;
overflow: auto;
height: 150px;
cursor: default;
font: 13px Arial, sans-serif;
display: none;
}
#selectOptionsBox li {
padding: 2px;
}
#selectOptionsBox li:hover {
background: gainsboro;
}
var selectBox = document.getElementById("selectBox");
var selectOptionsBox = document.getElementById("selectOptionsBox");
var selectOptions = selectOptionsBox.getElementsByTagName("li");
selectBox.innerHTML = selectOptions[0].innerHTML;
selectBox.onclick = function() {
if (selectOptionsBox.style.display != "block") {
selectOptionsBox.style.display = "block";
} else {
selectOptionsBox.style.display = "none";
}
}
window.onclick = function(e) {
if (e.target != selectBox &&
selectOptionsBox.style.display == "block") {
selectOptionsBox.style.display = "none";
}
}
for (var i = 0; i < selectOptions.length; i++) {
(function(i) {
selectOptions[i].onclick = function() {
selectBox.innerHTML = this.innerHTML;
}
})(i);
}