Entwerfen des ausgewählten Tags

8

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%     
Mr_Green 14.10.2013, 05:37
quelle

5 Antworten

4

Fügen Sie pointer-events:none; zu Ihren Pseudo-Element-Klassen hinzu.

FIDDLE

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%     
Danield 14.10.2013, 05:53
quelle
2

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.

Demo

%Vor%     
Mr. Alien 14.10.2013 05:53
quelle
1

Ich habe eine css3-Eigenschaft verwendet.

%Vor%

Sieh dir die Geige

an     
VJS 14.10.2013 06:02
quelle
1

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:

%Vor%

Sample Geige

    
Mr_Green 14.10.2013 07:01
quelle
0

Sie können meine benutzerdefinierte Auswahl verwenden Ich erstelle ein neues Design-Select-Element basierend auf dem Original mit css und jquery

Sie können hier ein Beispiel herunterladen

Ссылка

    
yaniv.s 13.04.2014 16:19
quelle

Tags und Links