web-dev-qa-db-fra.com

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

Je voudrais ajouter du style sur une zone de sélection avec le pseudo: after (pour styler ma zone de sélection avec 2 parties et sans images). Voici le code HTML:

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

Et ça ne marche pas. Je ne sais pas pourquoi et je n'ai pas trouvé de 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;
}

Alors est-ce normal ou y a-t-il un tour?

htmlcssselect
104
Nicolas Merouze

Je n'ai pas vérifié cela de manière approfondie, mais j'ai l'impression que cela n'est pas (encore?) Possible, en raison de la manière dont les éléments select sont générés par le système d'exploitation sur lequel le navigateur s'exécute, plutôt que le navigateur lui-même.

113
David Thomas

Je cherchais la même chose car l’arrière-plan de ma sélection est identique à celui de la couleur de la flèche. Comme mentionné précédemment, il est encore impossible d'ajouter quoi que ce soit en utilisant: before ou: after sur un élément select. Ma solution a été de créer un élément wrapper sur lequel j'ai ajouté ce qui suit: before code.

.select-wrapper {
    position: relative;
}

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

Et ceci ma sélection

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 ce que vous voulez d'autre. Évidemment, ce n'est pas une solution parfaite, mais selon vos besoins, cela pourrait être suffisant.

58
sroy

D'après mon expérience, cela ne fonctionne tout simplement pas, à moins que vous ne vouliez envelopper votre <select> dans un emballage. Mais ce que vous pouvez faire à la place est d’utiliser l’image d’arrière-plan SVG. Par exemple.

    .archive .options select.opt {
    -moz-appearance: none;
    -webkit-appearance: none;
    padding-right: 1.25EM;
    appearance: none;
    position: relative;
    background-color: transparent;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' height='10px' width='15px'%3E%3Ctext x='0' y='10' fill='gray'%3E%E2%96%BE%3C/text%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 1.5EM 1EM;
    background-position: right center;
    background-clip: border-box;
    -moz-background-clip: border-box;
    -webkit-background-clip: border-box;
}

    .archive .options select.opt::-ms-expand {
        display: none;
    }

Soyez juste prudent avec le bon encodage d'URL à cause d'IE. Tu dois utiliser charset=utf8 (pas seulement utf8), n'utilisez pas de guillemets doubles (") pour délimiter les valeurs d'attributs SVG, utilisez plutôt des apostrophes (') pour vous simplifier la vie. Code-URL s (% 3E). Si vous devez imprimer des fichiers non ASCII vous devez obtenir la représentation UTF-8 (par exemple, BabelMap peut vous aider), puis la fournir sous forme codée en URL, par exemple pour (U+25BE PETIT TRIANGLE NOIR POINTANT VERS LE BAS) La représentation UTF-8 est \xE2\x96\xBE lequel est %E2%96%BE lorsque l’URL est codée.

26
Đonny

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

Il utilise un div extérieur avec une classe pour résoudre ce problème.

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

Face au même problème. Cela pourrait probablement ê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 {
    ...
}
13
Ivan

Cette solution est similaire à celle de sroy, mais avec un triangle css à la place de la police web:

.select-wrapper {
  position: relative;
  width: 200px;
}
.select-wrapper:after {
  content: "";
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid #666;
  position: absolute;
  right: 8px;
  top: 8px;
  pointer-events: none;
}
select {
  background: #eee;
  border: 0 !important;
  border-radius: 0;
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  text-indent: 0.01px;
  text-overflow: "";
  font-size: inherit;
  line-height: inherit;
  width: 100%;
}
select::-ms-expand {
  display: none;
}
<div class="select-wrapper">
  <select>
    <option value="1">option 1</option>
    <option value="2">option 2</option>
    <option value="3">option 3</option>
  </select>
</div>
6
LarS

C’est une solution moderne que j’ai concoctée avec font-awesome . Les extensions de fournisseur ont été omises par souci de brièveté.

[~ # ~] html [~ # ~] 

<fieldset>
    <label for="color">Select Color</label>
    <div class="select-wrapper">
        <select id="color">
            <option>Red</option>
            <option>Blue</option>
            <option>Yellow</option>
        </select>
        <i class="fa fa-chevron-down"></i>
    </div>
</fieldset>

[~ # ~] scss [~ # ~] 

fieldset {
    .select-wrapper {
        position: relative;

        select {
            appearance: none;
            position: relative;
            z-index: 1;
            background: transparent;

            + i {
                position: absolute;
                top: 40%;
                right: 15px;
            }
        }
    }

Si votre élément sélectionné a une couleur d'arrière-plan définie, cela ne fonctionnera pas, car cet extrait place essentiellement l'icône Chevron derrière l'élément sélectionné (pour permettre de cliquer sur le haut de l'icône pour lancer l'action sélectionnée).

Cependant, vous pouvez attribuer à l'éditeur de sélection la même taille que l'élément sélectionné et attribuer un style à son arrière-plan pour obtenir le même effet.

Consultez mon CodePen pour une démonstration fonctionnant qui montre ce code à la fois sur une boîte de sélection thématique sombre et claire à l'aide d'une étiquette standard et d'une étiquette "espace réservé", ainsi que d'autres styles nettoyés tels que les bordures et les largeurs. .

P.S. C’est une réponse que j’avais postée dans une autre question en double plus tôt cette année.

5
Tessa

Comme d'autres l'ont fait remarquer, l'utilisation de ces pseudo-éléments ne semble pas être possible.

Voici une solution qui n’exige aucune condition pour un wrapper: elle utilise un SVG dans une image d’arrière-plan. Vous devrez peut-être utiliser un décodeur d'entité HTML pour comprendre comment changer la couleur de remplissage.

-moz-appearance: none;
-webkit-appearance: none;
appearance: none;

background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23000000%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
background-repeat: no-repeat;
background-position: right .7em top 50%;
background-size: .65em auto;

Pincé à partir de CSS-Tricks .

1
Dominic Hurr
<div class="select">
<select name="you_are" id="dropdown" class="selection">
<option value="0" disabled selected>Select</option>
<option value="1">Student</option>
<option value="2">Full-time Job</option>
<option value="2">Part-time Job</option>
<option value="3">Job-Seeker</option>
<option value="4">Nothing Yet</option>
</select>
</div>

Au lieu de styler la sélection, pourquoi ne pas ajouter une division en dehors de la sélection.

et style ensuite en CSS

.select{
    width: 100%;
    height: 45px;
    position: relative;
}
.select::after{
    content: '\f0d7';
    position: absolute;
    top: 0px;
    right: 10px;
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    color: #0b660b;
    font-size: 45px;
    z-index: 2;

}
#dropdown{
    -webkit-appearance: button;
       -moz-appearance: button;
            appearance: button;
            height: 45px;
            width: 100%;
        outline: none;
        border: none;
        border-bottom: 2px solid #0b660b;
        font-size: 20px;
        background-color: #0b660b23;
        box-sizing: border-box;
        padding-left: 10px;
        padding-right: 10px;
}
0
Y.K