Frage Wie erstelle ich einen Platzhalter für eine 'Auswahl' Box?


Ich verwende Platzhalter für Texteingaben, die gut funktionieren. Aber ich möchte auch einen Platzhalter für meine Selectboxen verwenden. Natürlich kann ich nur diesen Code verwenden:

<select>
    <option value="">Select your option</option>
    <option value="hurr">Durr</option>
</select>

Aber die 'Wähle deine Option' ist in Schwarz statt in Hellgrau. Also könnte meine Lösung möglicherweise CSS-basiert sein. jQuery ist auch in Ordnung.

Dies macht die Option nur im Dropdown-Menü grau (also nach dem Klicken auf den Pfeil):

option:first {
    color: #999;
}

Bearbeiten: Die Frage ist: Wie erstellen Menschen Platzhalter in Selectboxen? Aber es wurde bereits beantwortet, Prost.

Dies führt dazu, dass der ausgewählte Wert immer grau ist (selbst nach Auswahl einer echten Option):

select {
    color:#999;
}

1130
2018-04-27 13:39


Ursprung


Antworten:


Wie wäre es mit einer nicht CSS - keine Javascript / jQuery Antwort?

<select>
    <option value="" disabled selected>Select your option</option>
    <option value="hurr">Durr</option>
</select>


2330
2018-05-02 15:45



Bin gerade über diese Frage gestolpert, hier ist was in FireFox & Chrome funktioniert (zumindest)

<style>
    select:invalid { color: gray; }
</style>
<form>
    <select required>
        <option value="" disabled selected hidden>Please Choose...</option>
        <option value="0">Open when powered (most valves do this)</option>
        <option value="1">Closed when powered, auto-opens when power is cut</option>
    </select>
</form>

Die Option Deaktiviert stoppt die <option> mit der Maus und der Tastatur ausgewählt werden, während nur verwendet wird 'display:none' erlaubt dem Benutzer, immer noch über die Tastatur Pfeile auszuwählen. Das 'display:none' Style lässt die Listbox einfach 'nett' aussehen.

Hinweis: Verwenden eines leeren value Attribut für die Option "Platzhalter" ermöglicht die Validierung (erforderliches Attribut) mit dem "Platzhalter" umzugehen, wenn die Option nicht geändert wird, aber erforderlich ist; Der Browser sollte den Benutzer auffordern, eine Option aus der Liste auszuwählen.

Update (Juli 2015):

Diese Methode wurde in folgenden Browsern bestätigt:

  • Google Chrome - v.43.0.2357.132
  • Mozilla Firefox - v.39.0
  • Safari - v.8.0.7 (Platzhalter ist im Dropdown-Menü sichtbar, aber nicht auswählbar)
  • Microsoft Internet Explorer - v.11 (Platzhalter ist im Dropdown-Menü sichtbar, aber nicht auswählbar)
  • Project Spartan - v.15.10130 (Platzhalter ist im Dropdown-Menü sichtbar, aber nicht auswählbar)

Update (Oktober 2015):

Entfernt die style="display: none" zugunsten des HTML5-Attributs hidden das hat breite Unterstützung. Das hidden Element hat ähnliche Eigenschaften wie display: none in Safari, IE, (Project Spartan muss überprüft werden) option ist in Dropdown sichtbar, aber nicht auswählbar.

Update (Januar 2016):

Wenn das select Element ist required es erlaubt den Gebrauch von :invalid CSS-Pseudo-Klasse, mit der Sie die select Element, wenn es im "Platzhalter" -Zustand ist. :invalid funktioniert hier wegen des leeren Wertes im Platzhalter option.

Sobald ein Wert festgelegt wurde, wird der :invalid Pseudo-Klasse wird gelöscht. Sie können optional auch verwenden :valid wenn Sie es wünschen.

Die meisten Browser unterstützen diese Pseudo-Klasse. IE10 +. Dies funktioniert am besten mit benutzerdefinierten Stil select Elemente; In einigen Fällen (z. B. Mac in Chrome / Safari) müssen Sie die Standardansicht von select Box, damit bestimmte Stile angezeigt werden, z. background-color, color. Sie können einige Beispiele und mehr über Kompatibilität an finden entwickler.mozilla.org.

Natives Aussehen des Elements Mac in Chrome:

Select box native Mac in Chrome

Verwenden des geänderten Randelements Mac in Chrome:

Altered select box Mac in Chrome


621
2017-12-09 08:22



Für ein Pflichtfeld gibt es in modernen Browsern eine reine CSS-Lösung:

select:required:invalid {
  color: gray;
}
option[value=""][disabled] {
  display: none;
}
option {
  color: black;
}
<select required>
  <option value="" disabled selected>Select something...</option>
  <option value="1">One</option>
  <option value="2">Two</option>
</select>


178
2018-04-22 18:30



So etwas vielleicht?

HTML:

<select id="choice">
    <option value="0" selected="selected">Choose...</option>
    <option value="1">Something</option>
    <option value="2">Something else</option>
    <option value="3">Another choice</option>
</select>

CSS:

#choice option { color: black; }
.empty { color: gray; }

JavaScript:

$("#choice").change(function () {
    if($(this).val() == "0") $(this).addClass("empty");
    else $(this).removeClass("empty")
});

$("#choice").change();

Arbeitsbeispiel: http://jsfiddle.net/Zmf6t/


92
2018-04-27 13:50



Ich habe gerade versteckte Attribut in der Option wie unten hinzugefügt, Es funktioniert gut für mich.

<select>
  <option hidden>Sex</option>
  <option>Male</option>
  <option>Female</option>
</select>


35
2018-06-30 10:42



Diese Lösung funktioniert auch in FireFox:
Ohne JS.

option[default] {
  display: none;
}
<select>
  <option value="" default selected>Select Your Age</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
</select>


22
2018-02-12 08:24



Ich hatte das gleiche Problem und während der Suche kam ich auf diese Frage, und nachdem ich eine gute Lösung für mich gefunden hatte, würde ich es gerne mit euch teilen, falls jemand davon profitieren könnte. hier ist es: HTML:

<select class="place_holder dropdown">
    <option selected="selected" style=" display: none;">Sort by</option>
    <option>two</option>
    <option>something</option>
    <option>4</option>
    <option>5</option>
</select>

CSS:

.place_holder{
    color: gray;
}
option{
    color: #000000;
}

JS:

jQuery(".dropdown").change(function () {
    jQuery(this).removeClass("place_holder");
});

Nachdem der Kunde zuerst keine graue Farbe auswählen möchte, entfernt JS die Klasse place_holder. Ich hoffe, das hilft jemandem :)

Aktualisieren: Dank @ user1096901, als eine Arbeit für IE-Browser, können Sie hinzufügen place_holder Klasse erneut, falls die erste Option erneut ausgewählt wurde :)


19
2017-08-11 05:00



hier ist mein

select:focus option.holder {
  display: none;
}
<select>
    <option selected="selected" class="holder">Please select</option>
    <option value="1">Option #1</option>
    <option value="2">Option #2</option>

</select>


12
2017-11-15 06:00



Ich sehe Anzeichen für richtige Antworten, aber um alles zusammen zu bringen, wäre dies meine Lösung.

select{
  color: grey;
}

option {
  color: black;
}

option[default] {
   display: none;
}
<select>
    <option value="" default selected>Select your option</option>
    <option value="hurr">Durr</option>
</select>


11
2018-04-10 16:50



Es gibt keine Notwendigkeit für JS oder CSS, nur 3 Attribute:

<select>
    <option selected disabled hidden>Default Value</option>
    <option>Value 1</option>
    <option>Value 2</option>
    <option>Value 3</option>
    <option>Value 4</option>
</select>

Es zeigt die Option überhaupt nicht an, sondern legt nur den Wert der Option als Standard fest.

Wenn Sie nur mag keinen Platzhalter, der die gleiche Farbe wie der Rest hat, können Sie es inline wie folgt beheben:

<!DOCTYPE html>
<html>
<head>
<title>Placeholder for select tag drop-down menu</title>
</head>

<body onload="document.getElementById('mySelect').selectedIndex = 0">

<select id="mySelect" onchange="document.getElementById('mySelect').style.color = 'black'"  style="color: gray; width: 150px;">
  <option value="" hidden>Select your beverage</option> <!-- placeholder -->
  <option value="water" style="color:black" >Water</option>
  <option value="milk" style="color:black" >Milk</option>
  <option value="soda" style="color:black" >Soda</option>
</select>

</body>
</html>

Offensichtlich können Sie die Funktionen und zumindest das CSS des Selects in separate Dateien aufteilen.

Hinweis: Die Onload-Funktion korrigiert einen Aktualisierungsfehler.


10
2018-02-24 07:54