Select-Element mit einem Platzhaltertext ausstatten

Seit HTML5 besitzen HTML-Tags, wie input und textarea die Möglichkeit einen Platzhaltertext (Placeholder) anzeigen zu können. Das ist ungemein praktisch. Da man dem Nutzer sagen kann, was in das jeweilige Eingabefeld hineingehört. Wird in das Feld etwas eingegeben, verschwindet der Placeholder-Text. Anders als beim Value-Attribut wird hier kein Wert vordefiniert, welcher anschließend vom User entfernt werden muss. Der Support des Placeholder-Attributs liegt bei 88,34 Prozent. Damit ist das Attribut für viele Webbrowser salonfähig. Formulare lassen sich damit wunderbar erklären. Das spart rein von der Sache her, sogar das Label ein, weil man den Text einfach in den Placeholder setzt. Für das Select-Element gibt es leider kein Placeholder-Attribut. Schade, denn gerade da wäre es eben auch sehr sinnvoll.

Select-Element mit Placeholder (aus meinem neuen Design)
Select-Element mit Placeholder (aus meinem neuen Design)

Da ich ja gerade an meinem neuen Blogdesign arbeite, stand ich vor der Herausforderung einem Select-Element einen Platzhaltertext zu verpassen. Im Grunde ist es relativ simpel. Aber alleine mit CSS und HTML geht es nicht. Es braucht auch ein paar Zeilen JavaScript. In meinem Fall jQuery, weil ich es ohnehin verwende. Nachfolgend also eine kleines Tutorial.

<select>
	<option value="" disabled selected default>Choose everything</option>
	<option value="Entry 1">Entry 1</option>
	<option value="Entry 2">Entry 2</option>
	<option value="Entry 3">Entry 3</option>
</select>

Zunächst brauchen wir natürlich ein Select-Element mit ein paar Auswahlmöglichkeiten. Die erste Option wird später unser Placeholder. Da dieser Eintrag nicht auswählbar sein soll, wird dieser gleich deaktiviert und als Standard festgesetzt. Wird die Auswahlbox mit dem Attribut required versehen, muss der Nutzer trotz Platzhalter seine Auswahl treffen.

option[disabled]{display:none}
select{color:#999;width: 150px}
select option{color: #000}
.selected{color:#000}

Die deaktivierte Option blenden wir aus. Innerhalb der Auswahlliste spielt ihre Existenz keine Rolle. Der Text wird im Select-Element trotzdem angezeigt. Falls in der Auswahl mehrere Einträge disabled sind, kann man den Placeholder-Eintrag entweder mit einer Klasse versehen oder wenn er an erster Stelle steht über den Selektor :first-child ansprechen. Das Select-Element erhält direkt per CSS die Placeholder-Farbe. Warum? Wird die Farbe per JavaScript festgelegt sieht man das beim Seitenaufruf für einen kurzen Moment. Das hat jedoch den Nachteil, dass bei deaktiviertem JavaScript die Placeholder-Farbe gesetzt wird. Doch mithilfe des Noscript-Elements lässt sich dem entgegenwirken:

<noscript>
<style>select{color:#000}</style>
</noscript>

Ganz optimal ist die Lösung zwar nicht, aber es kommt heute eher seltener vor, dass ein Anwender auf JavaScript verzichtet. Die letzten beiden CSS-Regeln weiter oben weisen den sichtbaren Optionen und auch der späteren Auswahl die Farbe Schwarz zu.

$(document).ready(function(){ 
 if ($('select').children('option[disabled]').is(':selected')) {
 } else {
  $('select').addClass('selected');
 }
});
$('select').change(function() {
 if ($(this).children('option[disabled]').is(':selected')) {
 } else {
  $(this).addClass('selected');
 }
});

Damit unser Platzhaltertext sich nun genauso wie ein normales Placeholder-Attribute verhält, braucht es noch ein bisschen jQuery. Ich habe hier zwei Funktionen verwendet. Der erste Aufruf ist nur nötig, falls nach einem Reload der Seite die Auswahl erhalten bleibt. Da macht es keinen Sinn, dass der Text wieder die Färbung des Placeholders annimmt. Das zweite Event bewirkt die farbliche Änderung, wenn der Nutzer etwas auswählt.

Dieser recht simple Workaround lässt das Select-Element so erscheinen, als hätte es einen echten Platzhaltertext. Wer das Ganze live sehen möchte, für den habe ich eine kleine Demo vorbereitet. Für die Zukunft würde ich mir aber das Placeholder-Attribut auch für Select-Elemente wünschen. In meinen Augen ist das eine wirklich sinnvolle Erweiterung. Wie denkt ihr darüber? Ist die Auswahlbox eurer Meinung nach vom Aussterben bedroht oder weiterhin gefragt?


Avatar von reraiseace
Autor: Markus Werner (reraiseace) Twitterreraiseace, Google+reraiseace, Twittercb_werner
Ich bin Redaktionsvolontär bei der COMPUTER BILD in Hamburg, Fernstudent am Deutschen Journalistenkolleg und schreibe auf re{raise}ace privat über Webdesign und Programmierung. Seit 2015 schrieb ich auch regelmäßig für andere Medien.

0 Kommentare – Schreib mir deine Meinung!

Fülle bitte die nachstehenden Felder aus. Angaben mit einem Sternchen sind Pflichtangaben. Deine E-Mail-Adresse wird nicht veröffentlicht.