Problem mit <select> und: after mit CSS in WebKit

Ich möchte einem Auswahlfeld mit dem Pseudo: after einen Stil hinzufügen (um mein Auswahlfeld mit 2 Teilen und ohne Bilder zu formatieren). Hier ist der HTML:

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

Und es funktioniert nicht. Ich weiß nicht warum und habe die Antwort in den W3C-Spezifikationen nicht gefunden. Hier ist das 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;
}

Ist es also normal oder gibt es einen Trick?

Ich habe dies nicht ausführlich überprüft, aber ich habe den Eindruck, dass dies (noch?) Nicht möglich ist, da selectElemente vom Betriebssystem generiert werden, auf dem der Browser ausgeführt wird, und nicht vom Browser selbst.

Ich habe nach dem gleichen gesucht, da der Hintergrund meiner Auswahl mit der Pfeilfarbe übereinstimmt. Wie bereits erwähnt, ist es noch unmöglich, mit: before oder: after ein ausgewähltes Element hinzuzufügen. Meine Lösung bestand darin, ein Wrapper-Element zu erstellen, zu dem ich Folgendes hinzufügte: vor dem 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;
}

Und das ist meine Auswahl

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;
}

Ich habe FontAwesome.io für meinen neuen Pfeil verwendet, aber Sie können alles verwenden, was Sie möchten. Natürlich ist dies keine perfekte Lösung, aber je nach Ihren Anforderungen kann es ausreichen.

Nach meiner Erfahrung funktioniert es einfach nicht, es sei denn, Sie sind bereit, Ihre <select>in eine Hülle zu wickeln . Sie können jedoch stattdessen SVG mit Hintergrundbild verwenden. Z.B

    .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;
    }

Seien Sie wegen des IE nur vorsichtig mit der richtigen URL-Codierung. Sie müssen charset=utf8(nicht nur utf8) verwenden, keine doppelten Anführungszeichen (") verwenden, um SVG-Attributwerte abzugrenzen, stattdessen Apostrophe (') verwenden, um Ihr Leben zu vereinfachen. URL-Codierung (% 3E). Falls Sie drucken müssen Alle Nicht-ASCII-Zeichen, die Sie benötigen, um ihre UTF-8-Darstellung zu erhalten (z. B. BabelMap kann Ihnen dabei helfen) und diese Darstellung dann in URL-codierter Form bereitstellen - z. B. für UT ( U+25BEBLACK DOWN-POINTING SMALL TRIANGLE) UTF-8-Darstellung \xE2\x96\xBEDas ist, %E2%96%BEwenn URL-codiert.

Dieser Beitrag kann hilfreich sein http://bavotasan.com/2011/style-select-box-using-only-css/

Er verwendet ein externes Div mit einer Klasse, um dieses Problem zu lösen.

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

Konnte das gleiche Problem. Wahrscheinlich könnte es eine Lösung sein:

<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 {
    ...
}

Diese Lösung ähnelt der von sroy, jedoch mit CSS-Dreieck anstelle von Web-Schriftart:

.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>

Was ist, wenn das Ändern des Markups keine Option ist?

Hier ist eine Lösung, die keine Anforderungen an einen Wrapper stellt: Sie verwendet eine SVG in einem Hintergrundbild. Möglicherweise müssen Sie einen HTML-Entitätsdecoder verwenden, um zu verstehen, wie die Füllfarbe geändert wird.

-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;

Von CSS-Tricks gekniffen .

Dies ist eine moderne Lösung, die ich mit font-awesome erfunden habe . Herstellererweiterungen wurden der Kürze halber weggelassen.

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;
            }
        }
    }

Wenn Ihr Auswahlelement eine definierte Hintergrundfarbe hat, funktioniert dies nicht, da dieses Snippet im Wesentlichen das Chevron-Symbol hinter dem Auswahlelement platziert (damit Sie durch Klicken auf das Symbol weiterhin die Auswahlaktion starten können).

Sie können den Select-Wrapper jedoch auf dieselbe Größe wie das Select-Element und seinen Hintergrund formatieren, um den gleichen Effekt zu erzielen.

In meinem CodePen finden Sie eine funktionierende Demo, in der dieser Code sowohl in einem dunklen als auch in einem hellen Auswahlfeld mit einem regulären Etikett und einem "Platzhalter" -Label sowie anderen bereinigten Stilen wie Rahmen und Breiten angezeigt wird.

PS Dies ist eine Antwort, die ich Anfang dieses Jahres auf eine andere, doppelte Frage gestellt hatte.

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

Wenn Sie die Auswahl gestylt haben, fügen Sie außerhalb der Auswahl kein Div hinzu.

und dann in CSS stylen

.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;
}