Ist es möglich, ein Auswahlfeld zu gestalten? [geschlossen]

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?

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:

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

Stylen Sie 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 beiden, die ich gesehen habe, die es wert sind, überprüft zu werden:

• Ausgewählt - jede Menge cooler Sachen, 7k + Beobachter auf Github. (erwähnt von 'einem bezahlten Nerd' in den Kommentaren)
• Select2 - inspiriert von Chosen, Teil von Angular-UI mit einigen nützlichen Verbesserungen an Chosen.

Ja!

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

• Fügt Bilder und Text hinzu select options
• Kann JSON verwenden, um Optionen zu füllen
• Unterstützt Rückruffunktionen bei Auswahl

Und hier ist eine Vorschau der verschiedenen Modi:

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):

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;
}

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.

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.

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

<select class='select'>
    <option value='foo'>bar</option>    
</select>

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.

.div {
    width: 200px;
    height: 15px;
    position: absolute;
    z-index: 0;
}

<div class='.div'>{the text of the the current selection updated by javascript}</div>
<select class='select'>
    <option value='foo'>bar</option>    
</select>

Aktualisieren Sie das innerHTML des Div mit Javascript. Einfach mit jQuery:

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

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.

Hier ist ein kleiner Stecker, wenn Sie meistens wollen

• verrückt werden, den geschlossenen Zustand von a anpassenselect Elements
• Im geöffneten Zustand bevorzugen Sie jedoch eine bessere native Erfahrung bei der Auswahl von Optionen (Scrollrad, Pfeiltasten, Registerkartenfokus, Ajax-Änderungen anoptions , korrekter Z-Index usw.).
• mag die unordentlichen ul, ligenerierten Markups nicht

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

$('select').yaselect();

Und das letzte Markup ist:

<div class="yaselect-wrap">
  <div class="yaselect-current"><!-- current selection --></div>
</div>
<select class="yaselect-select" size="5">
  <!-- your option tags -->
</select>

Schau es dir auf github.com an

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

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

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.

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

Ich habe das gerade gefunden, was wirklich gut zu sein scheint.

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

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:

<style>
#container { margin: 10px; padding: 5px; background: #E7E7E7; width: 300px; background: #ededed); }
#ul1 { display: none; list-style-type: none; list-style-position: outside; margin: 0px; padding: 0px; }
#container a {  color: #333333; text-decoration: none; }
#container ul li {  padding: 3px;   padding-left: 0px;  border-bottom: 1px solid #aaa;  font-size: 0.8em; cursor: pointer; }
#container ul li:hover { background: #f5f4f4; }
</style>

Nun der HTML-Code im Body-Tag:

<form>
<div id="container" onMouseOver="document.getElementById('ul1').style.display = 'block';" onMouseOut="document.getElementById('ul1').style.display = 'none';">
Select one entry: <input name="entrytext" type="text" disabled readonly>
<ul id="ul1">
    <li onClick="document.forms[0].elements['entrytext'].value='Entry 1'; document.getElementById('ul1').style.display = 'none';"><a href="#">Entry 1</a></li>
    <li onClick="document.forms[0].elements['entrytext'].value='Entry 2'; document.getElementById('ul1').style.display = 'none';"><a href="#">Entry 2</a></li>
    <li onClick="document.forms[0].elements['entrytext'].value='Entry 3'; document.getElementById('ul1').style.display = 'none';"><a href="#">Entry 3</a></li>
</ul>
</div>
</form>

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:

<select class="demo">
  <option value="value1">Label 1</option>
  <option value="value2" selected>Label 2</option>
  <option value="value3">Label 3</option>
</select>

Durch Ausführen wird styleSelect('select.demo')ein gestaltetes Auswahlfeld wie folgt erstellt:

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

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

dies zu Verwendungen der twitter-bootstrapStile drehen selectin dropdownMenü https://github.com/silviomoreto/bootstrap-select

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.

 <script>
   $(document).ready(function(){
     $('.dropdown_menu').each(function(){
       var baseData = $(this).find("select option:selected").html();
       $(this).prepend("<span>" + baseData + "</span>");
     });

     $(".dropdown_menu select").change(function(e){
       var nodeOne = $(this).val();
       var currentNode = $(this).find("option[value='"+ nodeOne +"']").text();
       $(this).parents(".dropdown_menu").find("span").text(currentNode);
     });
   });
</script>