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

145

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?

Apoorv Khurasia
quelle
6
Sie meinen, Sie möchten ein anpassbares Dropdown (in jquery integriert), oder? weil Auswahlfelder nicht einmal Browserobjekte sind (sie sind Plattformobjekte), sehr einfach, sehr roh, und Sie können nicht viel davon stylen (Sie können zum Beispiel die Ränder nicht stylen)
Ayyash
+1 für nette Erklärung und Formatierung!
Manish
6
Ausgewählt ist erwähnenswert, aber nicht sehr anpassbar und hat viele offene Fragen. Schön anzusehen und zu benutzen.
Ein bezahlter Nerd
1
@ Ayyash Was Sie sagen, gilt für MSHTML (Internet Explorer & Freunde) und WebCore (Safari) auf einigen Systemen (sicherlich Mac OS). Dies gilt nicht für Gecko (Firefox & Freunde). Das eigentliche Problem ist also, dass Sie selectElemente 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.
PointedEars
1
@PointedEras ja, 2012 können sie, aber ich schätze, das war vor 3 Jahren, als ich sagte, was ich sagte, ich bin mir ziemlich sicher, dass ich damals einen Schuss gegeben habe und es nicht funktioniert hat
Ayyash

Antworten:

45

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;
}
Mark A. Nicolosi
quelle
Ich habe diese Version ursprünglich ausprobiert, aber der DIV ist nicht relativ zu der Position positioniert, an der sich das Auswahlfeld befindet. Stattdessen ist es hart nach links positioniert.
Ich habe das selbst nicht benutzt. Die Demo ( brainfault.com/demo/selectbox/0.5 ) dafür sieht gut aus. Schauen Sie sich nach anderen Implementierungen um. Ich weiß, dass ich mehrere andere Plugins gesehen habe, die dies tun.
Mark A. Nicolosi
1
Ich habe es versucht und es hat eine Weile funktioniert, bis ich mehr als eine auf die Seite setzen musste. Jetzt ist es schwierig zu stylen, weil der Autor es aus irgendeinem dummen Grund für in Ordnung hielt, für alle Elemente dieselbe ID anstelle eindeutiger IDs oder Klassen zu verwenden. Jetzt denke ich daran, meine eigenen zu schreiben ...
Jonathan
19
404 - irgendwelche Ideen, wo es Spiegel gab?
Moak
2
Beachten Sie jedoch, dass die meisten ausgewählten Menü-Plugins für Screenreader nicht zugänglich sind. Ich habe noch keinen gefunden, der funktioniert.
Marcy Sutton
18

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:

Geben Sie hier die Bildbeschreibung ein

Papercowboy
quelle
14

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.

arxpoetica
quelle
11

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.

Shaun
quelle
10

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

Choonkeat
quelle
Es ist großartig und funktioniert auch auf Mobilgeräten :)
fliegende Schafe
funktioniert unter IOS. Entschuldigung, ich habe keinen Zugriff auf Android usw.?
Choonkeat
1
Das war keine Frage, es war Lob. es funktioniert gut auf meinem Android.
fliegende Schafe
5

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.

Alex
quelle
4

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

SRI
quelle
2

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>
Christoph Letmaier
quelle
Bitte geben Sie ein Beispiel an, anstatt nur auf eines zu verlinken.
Alle Arbeiter sind essentiell
Ich habe meine Antwort geändert, wie Sie es gewünscht haben.
Christoph Letmaier
1
Sieht jetzt viel besser aus. Übrigens ist nichts falsch daran, auf ein funktionierendes Beispiel oder eine Quelle zu verlinken, die ein Beispiel zeigt (dies kann sehr hilfreich sein). Da Links jedoch mit der Zeit unweigerlich ungültig werden, ist es wünschenswert, immer die erforderlichen Informationen in der Antwort selbst (die Sie angegeben haben) anzugeben, selbst wenn nützliche Links bereitgestellt werden.
Alle Arbeiter sind wesentlich
Ok, verstanden ... :-) Ich werde mein Bestes geben, um den Link am Leben zu erhalten ...
Christoph Letmaier
2

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:

Geben Sie hier die Bildbeschreibung ein

Mikemaccana
quelle
Randnotiz, keine Unterstützung für IE9 und darunter
Ben Sewards
1

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

Greg Franko
quelle
1

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

i10k
quelle
-1

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>
user3716078
quelle