Style van selectbox aanpassen na aanklikken optie

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Advanced Mendix Developer Order Management Systeme

Advanced Mendix Developer Order Management Systemen (NL) Den Haag HBO/WO IT Professional "Als Advanced Mendix Developer impact maken op de groeiende e-commerce markt? Je doet dit bij PostNL door met je DevOps team onze Mendix applicaties verder te ontwikkelen, waarbij je complexe logistieke business processen vertaalt naar applicaties die ons primaire proces ondersteunen". Wat ga je doen? PostNL wordt een postal tech company We nemen de ontwikkeling van onze IT applicaties in eigen hand door onze eigen software-ontwikkel-capability op te zetten. Als Advanced Mendix Developer ben je onderdeel van een multidisciplinair, agile werkend Business-IT-team. Samen met dit team bouw je onze logistieke IT-applicaties verder

Bekijk vacature »

Christian Snijders

Christian Snijders

05/02/2021 07:47:43
Quote Anchor link
Goedemorgen,

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)
PHP script in nieuw venster Selecteer het PHP script
1
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>


CSS zoals ik nu heb:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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);


}


Dit had ik geprobeerd maar deed helemaal niks:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
.selectbox < .selectbox_optie:focus{

    background-image:url(icons/dropdown.png);


}


Zal het ongetwijfeld ergens fout hebben gedaan of een niet bestaande actie hebben gemaakt
 
PHP hulp

PHP hulp

22/10/2021 18:28:21
 
Jan R

Jan R

05/02/2021 09:44:22
Quote Anchor link
Is dit niet voldoende. Waarom background-image?
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
.selectbox:focus{
    appearance: auto;
}

Jan
 
Christian Snijders

Christian Snijders

05/02/2021 09:56:41
Quote Anchor link
Jan:

Dat had ik gedaan omdat ik dus een specifiek icoontje wilde hebben in plaats van de standaard.
 
- Ariën -
Beheerder

- Ariën -

05/02/2021 12:10:06
Quote Anchor link
Dan moet je er een container omheen plaatsen, want de checkbox zelf kan je zeer beperkt tot niet stylen.

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 -
 
Jan R

Jan R

05/02/2021 12:24:09
 
Christian Snijders

Christian Snijders

05/02/2021 12:42:10
Quote Anchor link
Jan:
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.
 
Jan R

Jan R

05/02/2021 13:15:16
Quote Anchor link
Heb je dan niet :active nodig?
 
Christian Snijders

Christian Snijders

05/02/2021 13:54:01
Quote Anchor link
Dan klapt het pijltje al terug zodra ik maar net buiten het selectieboxje kom
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.