basti1012.bplaced.net

Da man Option und select Elemente schlecht stylen kann sollte man sich selber eins erstellen. Somit kann man es auch stylen, wie man möchte

Code

                                    
                                <style>
*{
    margin:0;
    padding:0;
box-sizing:border-box;
}
#haupt{
    width:220px;
    margin:40px auto;
}

  #selectmenue{
    height:25px;
width:220px;
    padding:5px;
    cursor:pointer;
  }


input:hover{
    background:lightgrey;
}
input:focus{
    background:green;
}
#haupt  ul{
  width:100%;
      display:none;
      border:1px solid #ccc;
}
#haupt ul li{
  width:100%;
  list-style-type:none;
  padding:5px;
  cursor:pointer;
}
#haupt ul li:hover { 
  background:red;
  }

</style>

<div id="haupt">
<input type="text" id="selectmenue" placeholder="auswahl...">
  <ul>
    <li> html </li>
    <li> css </li>
    <li> javascript</li>
    <li> Php </li>
    <li> Sql </li>
  </ul>
</div>
<script>
sele = document.querySelector('#selectmenue');
ul = document.querySelector('#haupt ul'); 
lis = document.querySelectorAll('li');
sele.addEventListener('click', function(){ 
    ul.style.display='block'; 
    lis.forEach(function(i){
         i.addEventListener('click', function(){
             sele.value=i.textContent;
             ul.style.display='none'; 
         });
    });
});
</script>