Entwerfen des ausgewählten Tags
Ich versuche, ein Select-Tag wie in der folgenden Abbildung zu entwerfen:
Irgendwie habe ich es geschafft, es zu entwerfen, indem ich das select-Tag in ein div hüllte. aber das Problem ist, dass, wenn ich auf den entworfenen Pfeil klicke, das select-Tag nicht funktioniert oder alle Listen anzeigt.
Was ich erwarte ist, dass wenn ich auf den Pfeil klicke, das select-Tag alle Optionen anzeigen soll. was nicht passiert, weil der Pfeilabschnitt unter Verwendung der Pseudoelemente der übergeordneten Wrapperelemente erzeugt wird. Ich habe keine Pseudo-Element-Selektoren gewählt, weil es scheinbar nicht funktioniert .
Ich kann dieses Problem lösen, indem ich background-image an den übergeordneten Wrapper anwende, aber da ich die vollen Rechte habe, den HTML-Code so zu ändern, wie ich kann, suche ich nach einem besseren Ansatz ohne Bilder oder Javascript, d. h. nur mit CSS.
Hier ist die Geige .
%Vor% %Vor%5 Antworten
Fügen Sie pointer-events:none; zu Ihren Pseudo-Element-Klassen hinzu.
Hinweis: IE10- unterstützt die Zeiger-Ereignis-Eigenschaft nicht ( caniuse sagt IE11 wird, obwohl)
Also für IE:
Entweder müssen Sie sich damit abfinden, dass der Pfeil nicht klickbar ist oder
Sie könnten Modernizr verwenden, um zu erkennen, ob Zeigerereignisse unterstützt werden - falls nicht (IE10-) - kehren Sie zum eingebauten Pfeil zurück. (indem Sie in diesem Fall nicht Ihre speziellen Styling-Klassen verwenden)
%Vor% Wenn Sie :after , :before pseudo verwenden, wird ein virtuelles Element erstellt und Sie überlagern es über Ihre Auswahlbox. Daher können Sie das Element select nicht auslösen. Am besten ist es, background-image hier zu verwenden. Ich habe das unten von Anfang an gemacht, Sie können es überprüfen.
Dies scheint die nächste Lösung zu sein, um das select-Tag zu entwerfen.
Arbeitsgeige
HTML
%Vor%CSS
%Vor% Sie können es auch mit :active selector in Kombination mit :after / :before Pseudo-Elementselektoren noch besser machen. Etwas wie das: