Nu ben ik al een tijdje aan het zoeken voor het volgende, dit stukje css heb ik gemaakt maar na het klikken op een optie krijg ik niet het "pijltje" terug zoals de niet gefocuste selectbox.
Nu las ik ergens dat CSS het wel kon door als een focus gelegd wordt op een optie hij de parent aan kan passen.
Bij active draait het pijltje terug terwijl ik dus een optie probeer te selecteren.
HTML code:
<select class='selectbox'>
<option class='selectbox_optie'>2021</option>
<option class='selectbox_optie'>2020</option>
<option class='selectbox_optie'>2019</option>
<option class='selectbox_optie'>2018</option>
</select>
CSS zoals ik nu heb:
.selectbox{
appearance: none;
padding:10px;
border:0px;
border-bottom:1px solid #01b0d6;
background-image:url(icons/dropdown.png);
background-repeat:no-repeat;
background-position:5px;
padding-left:25px;
}
.selectbox:focus{
background-image:url(icons/rotatedropdown.png);
}
Dit had ik geprobeerd maar deed helemaal niks:
.selectbox < .selectbox_optie:focus{
background-image:url(icons/dropdown.png);
}Zal het ongetwijfeld ergens fout hebben gedaan of een niet bestaande actie hebben gemaakt
