Eigenes Selectmenü erstellen
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
Der hier verwendete 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>