Ich habe ein HTML-Auswahlfeld, das ich stylen muss. Ich würde es vorziehen, nur CSS zu verwenden, aber wenn ich muss, werde ich jQuery verwenden, um die Lücken zu füllen.
Kann jemand ein gutes Tutorial oder Plugin empfehlen?
Ich weiß, Google, aber ich habe in den letzten zwei Stunden gesucht und finde nichts, was meinen Anforderungen entspricht.
Es muss sein:
- Kompatibel mit jQuery 1.3.2
- Zugänglich
- Unaufdringlich
- Vollständig anpassbar in Bezug auf das Styling aller Aspekte eines Auswahlfelds
Weiß jemand etwas, das meine Bedürfnisse erfüllt?
jquery
css
html-select
Apoorv Khurasia
quelle
quelle
select
Elemente nicht browserübergreifend formatieren können. Aber wenn die Menschen bereit sind, mit den Unterschieden zu leben, können Sie sie stylen - einschließlich der Grenzen.Antworten:
Ich habe einige jQuery-Plugins gesehen, die
<select>
's in<ol>
' s und<option>
's in konvertieren<li>
' s , damit Sie es mit CSS formatieren können. Könnte nicht zu schwer sein, deine eigenen zu rollen.Hier ist eine: https://gist.github.com/1139558 (Wird hier verwendet , aber es sieht so aus, als ob die Website nicht verfügbar ist.)
Verwenden Sie es so:
Stylen Sie es so:
quelle
Update: Ab 2013 sind die beiden, die ich gesehen habe, die es wert sind, überprüft zu werden:
Ja!
Ab 2012 ist ddSlick eine der leichtesten und flexibelsten Lösungen, die ich gefunden habe . Relevante (bearbeitete) Informationen von der Website:
select options
Und hier ist eine Vorschau der verschiedenen Modi:
quelle
Was CSS betrifft, scheint Mozilla am freundlichsten zu sein, insbesondere ab FF 3.5+. Webkit-Browser machen meistens nur ihr eigenes Ding und ignorieren jeden Stil. IE ist sehr begrenzt, obwohl Sie mit IE8 zumindest die Rahmenfarbe / -breite stylen können.
Das Folgende sieht in FF 3.5+ tatsächlich ziemlich gut aus (natürlich Auswahl Ihrer Farbpräferenz):
Wenn es jedoch um IE geht, müssen Sie die Hintergrundfarbe für die Option deaktivieren, wenn Sie nicht möchten, dass sie angezeigt wird, wenn das Optionsmenü nicht geöffnet wird. Und wie gesagt, das Webkit macht sein eigenes Ding.
quelle
Wir haben einen einfachen und anständigen Weg gefunden, dies zu tun. Es ist browserübergreifend, abbaubar und beschädigt keinen Formularbeitrag. Stellen Sie zuerst die Deckkraft des Auswahlfelds auf 0 ein.
Auf diese Weise können Sie immer noch darauf klicken
Machen Sie dann div mit den gleichen Abmessungen wie das Auswahlfeld. Das div sollte als Hintergrund unter dem Auswahlfeld liegen. Verwenden Sie dazu {position: absolute} und den Z-Index.
Aktualisieren Sie das innerHTML des Div mit Javascript. Einfach mit jQuery:
Das ist es! Gestalten Sie einfach Ihr div anstelle des Auswahlfelds. Ich habe den obigen Code nicht getestet, daher müssen Sie ihn wahrscheinlich anpassen. Aber hoffentlich verstehen Sie das Wesentliche.
Ich denke, diese Lösung schlägt {-webkit-Erscheinungsbild: keine;}. Was Browser höchstens tun sollten, ist die Interaktion mit Formularelementen zu diktieren, aber definitiv nicht, wie sie ursprünglich auf der Seite angezeigt werden, da dies das Site-Design beeinträchtigt.
quelle
Hier ist ein kleiner Stecker, wenn Sie meistens wollen
select
Elementsoptions
, korrekter Z-Index usw.).ul
,li
generierten Markups nichtDann könnte jquery.yaselect.js besser passen . Einfach:
Und das letzte Markup ist:
Schau es dir auf github.com an
quelle
Sie können mit CSS bis zu einem gewissen Grad selbst stylen
Dies liegt jedoch ganz beim Browser. Einige Browser sind hartnäckig.
Dies bringt Sie jedoch nur so weit und sieht nicht immer sehr gut aus. Für eine vollständige Kontrolle müssen Sie eine Auswahl über jQuery durch ein eigenes Widget ersetzen, das die Funktionalität eines Auswahlfelds emuliert. Stellen Sie sicher, dass bei deaktiviertem JS ein normales Auswahlfeld vorhanden ist. Dies ermöglicht mehr Benutzern die Verwendung Ihres Formulars und erleichtert die Barrierefreiheit.
quelle
Die meisten Browser unterstützen das Anpassen von ausgewählten Tags mithilfe von CSS nicht. Aber ich finde dieses Javascript, mit dem Select-Tags formatiert werden können. Aber wie immer keine Unterstützung für IE-Browser.
http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/ Ich habe einen Fehler festgestellt, bei dem das Onchange-Attribut nicht funktioniert
quelle
Ich habe das gerade gefunden, was wirklich gut zu sein scheint.
http://www.dfc-e.com/metiers/multimedia/opensource/jqtransform/
quelle
Wenn Sie eine Lösung ohne jQuery haben. Ein Link, über den Sie ein funktionierendes Beispiel sehen können: http://www.letmaier.com/_selectbox/select_general_code.html (mit mehr CSS gestaltet)
Der Style-Abschnitt meiner Lösung:
Nun der HTML-Code im Body-Tag:
quelle
Aktualisiert für 2014: Sie benötigen dafür kein jQuery . Mit StyleSelect können Sie ein Auswahlfeld ohne jQuery vollständig formatieren . ZB bei folgendem Auswahlfeld:
Durch Ausführen wird
styleSelect('select.demo')
ein gestaltetes Auswahlfeld wie folgt erstellt:quelle
Ich habe das jQuery-Plugin SelectBoxIt erstellt ein paar Tagen erstellt. Es wird versucht, das Verhalten eines normalen HTML-Auswahlfelds nachzuahmen, aber Sie können das Auswahlfeld auch mit jQueryUI formatieren und animieren. Schau mal rein und lass mich wissen, was du denkst.
http://www.selectboxit.com
quelle
Sie sollten versuchen, ein jQuery-Plugin wie ikSelect zu verwenden .
Ich habe versucht, es sehr anpassbar, aber einfach zu bedienen.
http://github.com/Igor10k/ikSelect
quelle
Dies scheint alt, aber hier ein sehr interessantes Plugin - http://uniformjs.com
quelle
dies zu Verwendungen der
twitter-bootstrap
Stile drehenselect
indropdown
Menü https://github.com/silviomoreto/bootstrap-selectquelle
Eine einfache Lösung besteht darin, Ihr Auswahlfeld in einem Div zu verzerren und das Div passend zu Ihrem Design zu gestalten. Stellen Sie die Deckkraft auf 0 ein, um das Auswahlfeld auszuwählen. Dadurch wird das Auswahlfeld unsichtbar. Fügen Sie ein Span-Tag mit jQuery ein und ändern Sie seinen Wert dynamisch, wenn der Benutzer den Dropdown-Wert ändert. Vollständige Demonstration in diesem Tutorial mit Code-Erklärung. Hoffe, es wird Ihr Problem lösen.
JQuery Code sieht ähnlich aus.
quelle