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

123

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?

Nicolas Merouze
quelle
Ich stelle mir vor, dass dies nicht möglich wäre, nicht möglich wäre, da es sonst zu einfach wäre, den Inhalt von Formularen zu ändern. Stellen Sie sich ein einfaches Stück CSS vor, das den Anzeigepreis für etwas ändert. Es könnte als billiger gezeigt werden, als es wirklich ist, und die Leute dazu bringen, etwas für mehr zu kaufen, als sie erwartet hatten. (Oder natürlich, wenn jemand Zugriff auf das CSS einer Seite / eines Benutzer-Stylesheets hat, könnte er dies wahrscheinlich auch auf andere Weise tun…)
Synetech
22
@Synetech - Dies ist falsch. Der Autor der Seite sollte die vollständige Kontrolle über alle Aspekte des Seitenstils haben. Browserhersteller, die versuchen, das Styling bestimmter Elemente zu verhindern, weil sie dazu verwendet werden könnten , Benutzer irrezuführen, werden nicht effektiv sein, da es nahezu unbegrenzte Möglichkeiten gibt, das System auszutricksen oder falsch positive Ergebnisse zu erzielen.
Jonathan Cross
1
Mögliches Duplikat von Pseudo-Elementen und SELECT-Tag
Tessa

Antworten:

132

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.

David sagt, Monica wieder einsetzen
quelle
62
Es ist jetzt 2019 und es ist immer noch dasselbe
Placido
40
Es ist jetzt 2020 und es ist immer noch dasselbe
Joeri Minnekeer
3
Hätte ich Ihren Kommentar zu diesem 10 Jahre alten Beitrag vor einer Stunde gesehen, hätte ich mir eine Stunde meiner Zeit gespart. : C
ericek111
66

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.

sroy
quelle
4
Das ist optisch perfekt. Sie können jedoch nicht durch dieses Symbol klicken und ein Element auswählen, das nicht geöffnet werden soll: / Irgendwelche Vorschläge?
Schovi
11
Zeigerereignisse: keine; sollte sich darum kümmern. Es gab ein Problem mit meinem Code oben. Ich werde jeden Sass oben in CSS ändern, um Verwirrung zu beseitigen.
Sroy
Ist es wichtig, welcher Pseudo-Selektor (vorher gegen nachher) verwendet wird?
Eddiegroves
Sie können das eine oder andere verwenden
sroy
2
Dies ist eine großartige Lösung, aber als ich sie implementierte, stellte ich fest, dass aus irgendeinem Grund: vorher gearbeitet und NICHT: nachher. Ich weiß nicht warum.
Lee Probert
31

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.

Đonny
quelle
1
Dies ist eine schöne und elegante Lösung
JosFabre
1
Dies ist eine fantastische, einfache und elegante Lösung, die kein zusätzliches HTML erfordert, genau das, wonach ich gesucht habe! Vielen Dank! Dies sollte die gewählte Antwort IMO sein.
KyleFarris
15

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>
Glauber Ramos
quelle
13

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 {
    ...
}
Ivan
quelle
Können Sie die Stile hinzufügen, die erforderlich sind, damit das Etikett über dem ausgewählten Element liegt?
bafromca
7

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>

LarS
quelle
6

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 .

Dominic Hurr
quelle
Das ist ein schöner Trick. Super ärgerlich, dass wir im Jahr 2020 immer noch keine
Auswahl
5

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.

Tessa
quelle
1
<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;
}
schwarzes Schaf
quelle