De PHPhulp kroeg
Style van selectbox aanpassen na aanklikken optie
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:
Code (php)
1
2
3
4
5
6
2
3
4
5
6
<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>
<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:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.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);
}
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:
Code (php)
1
2
3
4
5
6
2
3
4
5
6
.selectbox < .selectbox_optie:focus{
background-image:url(icons/dropdown.png);
}
background-image:url(icons/dropdown.png);
}
Zal het ongetwijfeld ergens fout hebben gedaan of een niet bestaande actie hebben gemaakt
Code (php)
1
2
3
2
3
.selectbox:focus{
appearance: auto;
}
appearance: auto;
}
Jan
Dat had ik gedaan omdat ik dus een specifiek icoontje wilde hebben in plaats van de standaard.
Zo kan het dus wel:
https://www.w3schools.com/howto/howto_css_custom_checkbox.asp
Oh, ik las checkbox.
Gewijzigd op 05/02/2021 12:33:47 door - Ariën -
Daar gebeurt precies hetzelfde als die van mij doet, het pijltje veranderd niet meer na het kiezen van een optie tenzij je er naast klikt.
Bij mij was het de bedoeling dat het pijltje weer naar de oorspronkelijke afbeelding ging na het selecteren van de optie.