Ist es möglich, eine Auswahlbox zu stylen?

Ich habe eine HTML-Auswahlbox, die ich stylen muss. Ich würde lieber nur CSS verwenden, aber wenn ich muss, verwende ich jQuery, um die Lücken zu füllen.

Kann jemand ein gutes Tutorial oder Plugin empfehlen?

Ich weiß, Google, aber ich habe die letzten zwei Stunden gesucht und ich finde nichts, was meinen Bedürfnissen entspricht.

Es muss sein:

  • Kompatibel mit jQuery 1.3.2
  • Zugänglich
  • Unaufdringlich
  • Vollständig anpassbar in Bezug auf die Gestaltung jedes Aspekts einer Auswahlbox

Weiß jemand etwas, das meinen Bedürfnissen entspricht?

Ich habe einige jQuery-Plugins gesehen, die in

    und in

  1. umwandeln, so dass Sie sie mit CSS formatieren können. Es könnte nicht zu schwer sein, selbst zu rollen.

    Hier ist eine: https://gist.github.com/1139558 ( Hier verwendet , aber es sieht so aus, als wäre die Seite nicht erreichbar.)

    Benutze es so:

     $('#myselectbox').selectbox(); 

    Stil es so:

     div.selectbox-wrapper ul { list-style-type:none; margin:0px; padding:0px; } div.selectbox-wrapper ul li.selected { background-color: #EAF2FB; } div.selectbox-wrapper ul li.current { background-color: #CDD8E4; } div.selectbox-wrapper ul li { list-style-type:none; display:block; margin:0; padding:2px; cursor:pointer; } 

    Update: Ab 2013 sind die zwei, die ich gesehen habe, die es wert sind zu überprüfen:

    • Gewählt – jede Menge coole Sachen, 7k + Zuschauer auf GitHub. (erwähnt von ‘einem bezahlten Nerd’ in den Kommentaren)
    • Select2 – inspiriert von Chosen, Teil von Angular-UI mit ein paar nützlichen Verbesserungen bei Chosen.

    Ja!


    Ab 2012 ist eine der leichtesten, flexibelsten Lösungen, die ich gefunden habe, ddSlick . Relevante (bearbeitete) Informationen von der Site:

    • Fügt Bilder und Text hinzu, select options
    • Kann JSON zum Auffüllen von Optionen verwenden
    • Unterstützt Callback-functionen bei Auswahl

    Und hier ist eine Vorschau auf die verschiedenen Modi:

    Bildbeschreibung hier eingeben

    Was CSS betrifft, scheint Mozilla am freundlichsten zu sein, besonders ab FF 3.5+. Webkit-Browser machen meist nur ihr eigenes Ding und ignorieren jeden Stil. IE ist sehr begrenzt, obwohl IE8 Sie mindestens Randfarbe / -breite entcasting lässt.

    Das Folgende sieht tatsächlich in FF 3.5+ ziemlich gut aus (natürlich die Farbwahl):

     select { -moz-border-radius: 4px; -moz-box-shadow: 1px 1px 5px #cfcfcf inset; border: 1px solid #cfcfcf; vertical-align: middle; background-color: transparent; } option { background-color: #fef5e6; border-bottom: 1px solid #ebdac0; border-right: 1px solid #d6bb86; border-left: 1px solid #d6bb86; } option:hover { cursor: pointer; } 

    Aber wenn es um IE geht, müssen Sie die Hintergrundfarbe der Option deaktivieren, wenn Sie nicht möchten, dass sie angezeigt wird, wenn das Optionsmenü nicht heruntergezogen wird. Und wie gesagt, Webkit macht sein eigenes Ding.

    Wir haben einen einfachen und vernünftigen Weg gefunden, dies zu tun. Es ist browserübergreifend, abbaubar und bricht keine Formularpost. Setzen Sie zunächst die Deckkraft der Auswahlbox auf 0.

     .select { opacity : 0; width: 200px; height: 15px; }  

    So können Sie immer noch darauf klicken

    Dann machen Sie Div mit den gleichen Abmessungen wie die Auswahlbox. Das Div sollte unter dem Auswahlfeld als Hintergrund liegen. Verwenden Sie {position: absolute} und z-index, um dies zu erreichen.

     .div { width: 200px; height: 15px; position: absolute; z-index: 0; } 
    {the text of the the current selection updated by javascript}

    Aktualisieren Sie die innerHTML der div mit Javascript. Easypeasy mit jQuery:

     $('.select').click(function(event)) { $('.div').html($('.select option:selected').val()); } 

    Das ist es! Style einfach deine div anstelle der Auswahlbox. Ich habe den obigen Code nicht getestet, also müssen Sie ihn wahrscheinlich optimieren. Aber hoffentlich bekommst du das Wesentliche.

    Ich denke, diese Lösung schlägt {-webkit-appearance: none;}. Was Browser am meisten tun sollten, ist die Interaktion mit Formularelementen, aber definitiv nicht, wie sie ursprünglich auf der Seite angezeigt wurden, da dies das Site-Design unterbricht.

    Hier ist ein kleiner Stecker, wenn du es meistens willst

    • gehen Sie verrückt, indem Sie den geschlossenen Zustand eines select Elements anpassen
    • aber im offenen Zustand , bevorzugen Sie eine bessere native Erfahrung zu wählen Optionen (Scroll-Rad, Pfeiltasten, Tab-Fokus, Ajax Änderungen an options , ordnungsgemäße zindex, etc)
    • mag die unordentlichen ul , li generierte Markups

    Dann könnte jquery.yaselect.js besser passen . Einfach:

     $('select').yaselect(); 

    Und das letzte Markup ist:

     

    Schau es dir auf github.com an

    Sie können bis zu einem gewissen Grad mit CSS selbst gestalten

     select { background: red; border: 2px solid pink; } 

    Aber das hängt ganz vom Browser ab. Einige Browser sind stur.

    Das wird dich aber nur so weit bringen, und es sieht nicht immer sehr gut aus. Zur vollständigen Kontrolle müssen Sie eine Auswahl über jQuery durch ein eigenes Widget ersetzen, das die functionalität einer Auswahlbox emuliert. Stellen Sie sicher, dass, wenn JS deaktiviert ist, ein normales Auswahlfeld an seiner Stelle ist. Dadurch können mehr Benutzer Ihr Formular verwenden und es hilft bei der Barrierefreiheit.

    Die meisten Browser unterstützen das Anpassen von Select-Tags mit CSS nicht. Aber ich finde dieses Javascript, das verwendet werden kann, um das Tag zu stylen. Aber wie immer keine Unterstützung für IE-Browser.

    http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/ Ich habe einen Fehler festgestellt, dass das Onchange-Attribut nicht funktioniert

    Ich habe gerade das gefunden, was wirklich gut aussieht.

    http://www.dfc-e.com/metiers/multimedia/opensource/jqtransform/

    Wenn Sie eine Lösung ohne jQuery haben. Ein Link, wo Sie ein funktionierendes Beispiel sehen können: http://www.letmaier.com/_selectbox/select_general_code.html (gestylt mit mehr CSS)

    Der Stil-Abschnitt meiner Lösung:

      

    Jetzt der HTML-Code im Body-Tag:

     
    Select one entry:

    Für 2014 aktualisiert: Sie brauchen jQuery dafür nicht . Sie können eine Auswahlbox ohne jQuery mithilfe von StyleSelect vollständig formatieren . ZB bei gegebenem Auswahlfeld:

      

    Running styleSelect('select.demo') würde wie folgt eine styleSelect('select.demo') erstellen:

    Bildbeschreibung hier eingeben

    Ich habe vor einigen Tagen das jQuery-Plugin SelectBoxIt erstellt. Es versucht, das Verhalten eines normalen HTML-Auswahlfelds nachzuahmen, ermöglicht Ihnen aber auch, das Auswahlfeld mit jQueryUI zu formatieren und zu animieren. Werfen Sie einen Blick und lassen Sie mich wissen, was Sie denken.

    http://www.selectboxit.com

    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

    Dies scheint alt, aber hier ein sehr interessantes Plugin – http://uniformjs.com

    In diesem dropdown werden die twitter-bootstrap Stile verwendet, select im dropdown Menü https://github.com/silviomoreto/bootstrap-select eine select zu dropdown

    Einfache Lösung ist Warp Ihre Auswahlbox in einem Div, und style das Div passend zu Ihrem Design. Setzen Sie die Deckkraft: 0, um das Feld 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. In diesem Lernprogramm gezeigte Gesamtdemonstration mit Codeerklärung. Hoffe es wird dein Problem lösen.

    JQuery Code sieht ähnlich aus.