problème avec <select> et :after avec les CSS dans WebKit

Question

Je voudrais ajouter un peu de style sur une zone de sélection avec le pseudo :après (à mon style de sélectionner la zone avec 2 pièces et sans images). Voici le code HTML:

<select name="">
  <option value="">Test</option>
</select>

Et ça ne fonctionne pas. Je ne sais pas pourquoi et je n'ai pas trouvé la réponse dans les spécifications du W3C. Voici le CSS:

select {
  -webkit-appearance: none;
  background: black;
  border: none;
  border-radius: 0;
  color: white;
}

select:after {
  content: " ";
  display: inline-block;
  width: 24px; height: 24px;
  background: blue;
}

Donc, est-ce normal ou est-il un truc?

Answer 1

Je n'ai pas vérifié cette profondeur, mais j'ai l'impression que ce n'est pas (encore?) possible, en raison de la façon dont select des éléments sont générés par le système d'exploitation sur lequel le navigateur fonctionne, plutôt que le navigateur lui-même.

Answer 2

Je cherchais la même chose depuis le fond de ma sélection est la même que la flèche de couleur. Comme mentionné précédemment, il est encore impossible d'ajouter quoi que ce soit à l'aide de :before ou :after sur un élément select. Ma solution a été de créer un wrapper élément sur lequel j'ai ajouté ce qui suit :avant le code.

.select-wrapper {
    position: relative;
}

&:before {
    content: '\f0d7';
    font-family: FontAwesome;
    color: #fff;
    display: inline-block;
    position: absolute;
    right: 20px;
    top: 15px;
    pointer-events: none;
}

Et ceci, mes sélectionnez

select {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    width: 100%;
    padding: 10px 20px;
    background: #000;
    color: #fff;
    border: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

select::-ms-expand {
    display: none;
}

J'ai utilisé FontAwesome.io pour ma nouvelle flèche, mais vous pouvez utiliser tout ce que vous voulez. Évidemment, ce n'est pas une solution parfaite, mais en fonction de vos besoins, il peut être suffisant.

Answer 3

Ce post peut aider http://bavotasan.com/2011/style-select-box-using-only-css/

Il est à l'extérieur à l'aide d'un div avec une classe pour la résolution de ce problème.

<div class="styled-select">
  <select>
    <option>Here is the first option</option>
    <option>The second option</option>
  </select>
</div>

Answer 4

Face au même problème. Probablement, il pourrait être une solution:

<select id="select-1">
    <option>One</option>
    <option>Two</option>
    <option>Three</option>
</select>
<label for="select-1"></label>

#select-1 {
    ...
}

#select-1 + label:after {
    ...
}

Answer 5

est-ce pseudo ce que tu veux dire?

select:first-child {
    content: " ";
    display: inline-block;
    width: 24px;
    height: 24px;
    background: blue;
}