Discussion :

[popo]

Bonjour,

J'ai une liste déroulante que j'ai personnalisé avec le CSS suivant :

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
 
        select {
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            padding: 0;
            background: white;
            border: 0.5px;
            border-color: black;
            border-style: solid;
            padding: 1px 2em 1px 1px;
            color: #002F60; /* Texte en couleur 1 */
            height: 20px;
        }
 
        .select-container {
            position: relative;
            display: inline;
            border: 1px 1px 1px 1px;
            height: 20px;
        }
 
            .select-container:after {
                content: "";
                width: 0;
                height: 0;
                position: absolute;
                pointer-events: none;
                border: 1px 1px 1px 1px;
                height: 20px;
            }
 
            .select-container:after {
                border-left: 5px solid transparent;
                border-right: 5px solid transparent;
                top: .3em;
                right: .75em;
                border-top: 8px solid #A8BCCE; /* Flèche en couleur 7 */
                height: 20px;
            }
 
        select::-ms-expand {
            display: none;
        }

et que j'utilise comme ceci :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
            <div class="select-container" style="width:200px;">
                <select id="domain">
                    <option value="a">A</option>
                    <option value="b">B</option>
                    <option value="c">C</option>
                </select>
            </div>

Cela donne le résultat suivant :


Maintenant j'aimerai qu'on survol de la souris, la flèche change de couleur.
J'ai tenté d'ajouter ceci mais ça n'a pas d'effet :

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
.select-container:after:hover {
     border-top: 8px solid #F29400; /* Flèche en couleur si survol 12 */
}

Quelqu'un aurait une idée ?
Merci.

[psychadelic]

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
        .select-container:hover:after {
          border-top: 8px solid #F29400; /* Flèche en couleur si survol 12 */
        }

[popo]

Et dire qu'il ne m'est même pas venu à l'esprit de les inverser.
J'ai vraiment besoin de vacances.

Merci psychadelic.