Ich verwende Platzhalter für Texteingaben, was gut funktioniert. Ich möchte aber auch einen Platzhalter für meine Auswahlfelder verwenden. Natürlich kann ich nur diesen Code verwenden:

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

Die Option "Wählen Sie Ihre Option" ist jedoch schwarz statt hellgrau. Meine Lösung könnte also möglicherweise CSS-basiert sein. jQuery ist auch in Ordnung.

Dadurch wird die Option in der Dropdown-Liste nur grau (also nach dem Klicken auf den Pfeil):

option:first {
    color: #999;
}

Die Frage ist: Wie erstellen Personen Platzhalter in Auswahlfeldern? Aber es wurde bereits beantwortet, Prost.

Wenn Sie dies verwenden, ist der ausgewählte Wert immer grau (auch nach Auswahl einer realen Option):

select {
    color: #999;
}

Ein Nicht-CSS - keine JavaScript / jQuery-Antwort:

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

Ich bin gerade auf diese Frage gestoßen, und hier ist, was (zumindest) in Firefox und Chrome funktioniert:

<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>Auswahl sowohl mit der Maus als auch mit der Tastatur, während 'display:none'der Benutzer durch einfaches Verwenden weiterhin über die Tastaturpfeile auswählen kann. Der 'display:none'Stil lässt das Listenfeld nur "schön" aussehen.

Hinweis: Wenn Sie ein leeres valueAttribut für die Option "Platzhalter" verwenden, kann die Validierung (erforderliches Attribut) den "Platzhalter" umgehen. Wenn die Option nicht geändert wird, aber erforderlich ist, sollte der Browser den Benutzer auffordern, eine Option auszuwählen von der Liste.

Update (Juli 2015):

Diese Methode funktioniert in den folgenden Browsern:

• Google Chrome - v.43.0.2357.132
• Mozilla Firefox - v.39.0
• Safari - v.8.0.7 (der Platzhalter ist in der Dropdown-Liste sichtbar, aber nicht auswählbar)
• Microsoft Internet Explorer - v.11 (Platzhalter ist in der Dropdown-Liste sichtbar, aber nicht auswählbar)
• Projekt Spartan - v.15.10130 (der Platzhalter ist in der Dropdown-Liste sichtbar, aber nicht auswählbar)

Update (Oktober 2015):

Ich habe das style="display: none"HTML5-Attribut entfernt, hiddendas breite Unterstützung bietet. Das hiddenElement weist ähnliche Merkmale wie display: nonein Safari, Internet Explorer (Projekt Spartan muss überprüft werden) auf, wobei das optionElement in der Dropdown-Liste sichtbar ist, jedoch nicht ausgewählt werden kann.

Update (Januar 2016):

Wenn das selectElement aktiviert ist required, kann die :invalidCSS-Pseudoklasse verwendet werden, mit der Sie das selectElement im Status "Platzhalter" formatieren können. :invalidfunktioniert hier wegen des leeren Wertes im Platzhalter option.

Sobald ein Wert festgelegt wurde, wird die :invalidPseudoklasse gelöscht. Sie können optional auch verwenden, :validwenn Sie dies wünschen.

Die meisten Browser unterstützen diese Pseudoklasse. Internet Explorer 10 und höher. Dies funktioniert am besten mit benutzerdefinierten selectElementen. In einigen Fällen, z. B. (Mac in Chrome / Safari), müssen Sie das Standardaussehen der selectBox ändern , damit bestimmte Stile angezeigt werden, z. B. background-colorund color. Einige Beispiele und mehr zur Kompatibilität finden Sie unter developer.mozilla.org .

Aussehen des nativen Elements Mac in Chrome:

Verwenden des geänderten Rahmenelements Mac in Chrome:

Für ein erforderliches Feld 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>

Etwas wie das:

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/

Ich habe gerade ein verstecktes Attribut optionwie folgt hinzugefügt . Es funktioniert gut für mich.

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

Die folgende Lösung funktioniert auch in Firefox ohne JavaScript:

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>

Ich hatte das gleiche Problem und bin bei der Suche auf diese Frage gestoßen. Nachdem ich eine gute Lösung für mich gefunden habe, möchte ich sie mit euch teilen, falls jemand davon profitieren kann.

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

JavaScript:

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

Nachdem der Kunde die erste Auswahl getroffen hat, ist keine graue Farbe mehr erforderlich, sodass der JavaScript-Code die Klasse entfernt place_holder.

Dank @ user1096901 können Sie als Problemumgehung für den Internet Explorer die place_holderKlasse erneut hinzufügen, falls die erste Option erneut ausgewählt wird :)

JavaScript oder CSS sind nicht erforderlich, nur drei 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>

Die Option wird überhaupt nicht angezeigt. Es wird lediglich der Wert der Option als Standard festgelegt.

Wenn Sie jedoch keinen Platzhalter mögen, der dieselbe Farbe wie der Rest hat , können Sie ihn wie folgt inline korrigieren:

<!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>

Natürlich können Sie die Funktionen und zumindest das CSS der Auswahl in separate Dateien aufteilen.

Hinweis: Die Onload-Funktion korrigiert einen Aktualisierungsfehler.

Der Benutzer sollte den Platzhalter in ausgewählten Optionen nicht sehen. Ich schlage vor, das hiddenAttribut für die Platzhalteroption zu verwenden, und Sie benötigen das selectedAttribut für diese Option nicht. Sie können es einfach als erstes setzen.

select:not(:valid) {
  color: #999;
}

<select required>
    <option value="" hidden>Select your option</option>
    <option value="0">First option</option>
    <option value="1">Second option</option>
</select>

Hier habe ich Davids Antwort geändert (akzeptierte Antwort). Bei seiner Antwort hat er das deaktivierte und ausgewählte Attribut in das optionTag eingefügt, aber wenn wir auch ein verstecktes Tag einfügen, sieht es viel besser aus.

Durch Hinzufügen eines zusätzlichen versteckten Attributs zum optionTag wird verhindert, dass die Option "Option auswählen" erneut ausgewählt wird, nachdem die Option "Durr" ausgewählt wurde.

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

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>

Ich sehe Anzeichen für richtige Antworten, aber um alles zusammenzubringen, 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>

Wenn Sie Angular verwenden, gehen Sie folgendermaßen vor:

<select>
    <option [ngValue]="undefined"  disabled selected>Select your option</option>
    <option [ngValue]="hurr">Durr</option>
</select>

Diese HTML + CSSLösung hat bei mir funktioniert:

form select:invalid {
  color: gray;
}

form select option:first-child {
  color: gray;
}

form select:invalid option:not(:first-child) {
  color: black;
}

<form>
  <select required>
    <option value="">Select Planet...</option>
    <option value="earth">Earth</option>
    <option value="pandora">Pandora</option>
  </select>
</form>

Viel Glück...

Eine weitere Möglichkeit in JavaScript:

 $('body').on('change', 'select', function (ev){
    if($(this).find('option:selected').val() == ""){
        $(this).css('color', '#999');
        $(this).children().css('color', 'black');
    }
    else {
        $(this).css('color', 'black');
        $(this).children().css('color', 'black');
    }
});

JSFiddle

Ich liebe die akzeptierte Lösung und sie funktioniert hervorragend ohne JavaScript.

Ich möchte nur hinzufügen, wie ich diese Antwort für eine React-Komponente mit kontrollierter Auswahl übernommen habe , da ich einige Versuche gebraucht habe, um sie herauszufinden. Es wäre wirklich einfach zu integrieren react-selectund damit fertig zu werden, aber wenn Sie nicht die erstaunliche Funktionalität benötigen, die dieses Repository bietet, die ich für das betreffende Projekt nicht benötige, müssen Sie meinem Bundle keine weiteren Kilobyte hinzufügen. Note, react-selectGriffe Platzhalter in wählt durch ein komplexes System von verschiedenen inputsund htmlElementen.

In React können Sie für eine kontrollierte Komponente das selectedAttribut nicht zu Ihren Optionen hinzufügen . React behandelt den Status der Auswahl über ein valueAttribut auf sich selectselbst zusammen mit einem Änderungshandler, wobei der Wert mit einem der Wertattribute innerhalb der Optionen selbst übereinstimmen sollte.

Wie zum Beispiel

<select value={this.state.selectValue} onChange={this.handleChange} required={true}>
    {options}
</select>

selectedWas wäre dann, da es unangemessen wäre und tatsächlich einen Fehler auslösen würde, das Attribut einer der Optionen hinzuzufügen ?

Die Antwort ist einfach, wenn Sie einmal darüber nachgedacht haben. Da wollen wir unsere erste optionsein , selectedsowie disabledund hiddenmüssen wir drei Dinge tun:

1. Fügen Sie das hiddenund disabledAttribut der erste definierte option.
2. Stellen Sie den Wert des ersten optionals leere Zeichenfolge ein.
3. Initialisieren Sie den Wert von, selectum auch eine leere Zeichenfolge zu sein.

state = { selectValue = "" } // State or props or their equivalent

// In the render function
<select value={this.state.selectValue} onChange={this.handleChange} required={true}>
    <option key="someKey" value="" disabled="disabled" hidden="hidden">Select from Below</option>
    {renderOptions()}
</select>

Jetzt können Sie die Auswahl wie oben angegeben gestalten (oder über a, classNamewenn Sie dies bevorzugen).

select:invalid { color: gray; }

Eingabe [type="text"]Stil Platzhalter für Elemente auswählen

Die folgende Lösung simuliert einen Platzhalter in Bezug auf ein input[type="text"]Element:

$('.example').change(function () {
  $(this).css('color', $(this).val() === '' ? '#999' : '#555');
});

.example {
  color: #999;
}

.example > option {
  color: #555;
}

.example > option[value=""] {
  color: #999;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select class="example">
  <option value="">Select Option</option>
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
</select>

Ich wollte, dass SELECT grau ist, bis es für dieses HTML-Stück ausgewählt wird:

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

Ich habe diese CSS-Definitionen hinzugefügt:

select { color: grey; }
select:valid { color: black; }

Es funktioniert wie erwartet in Chrome / Safari und möglicherweise auch in anderen Browsern, aber ich habe es nicht überprüft.

Hier ist eine CSS- Lösung, die wunderbar funktioniert. Der Inhalt wird nach dem enthaltenden Element hinzugefügt (und absolut relativ zum Container positioniert) ( via: after pseudo-class ).

Der Text stammt aus dem Platzhalterattribut, das ich dort definiert habe, wo ich die Direktive verwendet habe ( attr (Platzhalter) ). Ein weiterer Schlüsselfaktor sind Zeigerereignisse: Keine - Dadurch können Klicks auf den Platzhaltertext an die Auswahl weitergeleitet werden. Andernfalls wird es nicht herunterfallen, wenn der Benutzer auf den Text klickt.

Ich füge die .empty- Klasse selbst in meine Select-Direktive ein, aber normalerweise finde ich, dass Angular .ng-empty für mich hinzufügt / entfernt (ich nehme an, das liegt daran, dass ich Version 1.2 von Angular in mein Codebeispiel einfüge).

(Das Beispiel zeigt auch, wie HTML-Elemente in AngularJS eingeschlossen werden, um eigene benutzerdefinierte Eingaben zu erstellen.)

var app = angular.module("soDemo", []);
app.controller("soDemoController", function($scope) {
  var vm = {};
  vm.names = [{
      id: 1,
      name: 'Jon'
    },
    {
      id: 2,
      name: 'Joe'
    }, {
      id: 3,
      name: 'Bob'
    }, {
      id: 4,
      name: 'Jane'
    }
  ];
  vm.nameId;
  $scope.vm = vm;
});

app.directive('soSelect', function soSelect() {
  var directive = {
    restrict: 'E',
    require: 'ngModel',
    scope: {
      'valueProperty': '@',
      'displayProperty': '@',
      'modelProperty': '=',
      'source': '=',
    },
    link: link,
    template: getTemplate
  };
  return directive;


  /////////////////////////////////
  function link(scope, element, attrs, ngModelController) {
    init();
    return;


    ///////////// IMPLEMENTATION

    function init() {
      initDataBinding();
    }


    function initDataBinding() {
      ngModelController.$render = function() {
        if (scope.model === ngModelController.$viewValue) return;
        scope.model = ngModelController.$viewValue;
      }

      scope.$watch('model', function(newValue) {
        if (newValue === undefined) {
          element.addClass('empty');
          return;
        }
        element.removeClass('empty');
        ngModelController.$setViewValue(newValue);
      });
    }
  }


  function getTemplate(element, attrs) {
    var attributes = [
      'ng-model="model"',
      'ng-required="true"'
    ];

    if (angular.isDefined(attrs.placeholder)) {
      attributes.push('placeholder="{{placeholder}}"');
    }

    var ngOptions = '';

    if (angular.isDefined(attrs.valueProperty)) {
      ngOptions += 'item.' + attrs.valueProperty + ' as ';
    }

    ngOptions += 'item.' + attrs.displayProperty + ' for item in source';
    ngOptions += '"';
    attributes.push('ng-options="' + ngOptions + '"');

    var html = '<select ' + attributes.join(' ') + '></select>';

    return html;
  }
});

so-select {
  position: relative;
}

so-select select {
  font-family: 'Helvetica';
  display: inline-block;
  height: 24px;
  width: 200px;
  padding: 0 1px;
  font-size: 12px;
  color: #222;
  border: 1px solid #c7c7c7;
  border-radius: 4px;
}

so-select.empty:before {
  font-family: 'Helvetica';
  font-size: 12px;
  content: attr(placeholder);
  position: absolute;
  pointer-events: none;
  left: 6px;
  top: 3px;
  z-index: 0;
  color: #888;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="soDemo" ng-controller="soDemoController">
  <so-select value-property="id" display-property="name" source="vm.names" ng-model="vm.nameId" placeholder="(select name)"></so-select>
</div>

Ich konnte derzeit keine davon zum Laufen bringen, da sie für mich (1) nicht erforderlich ist und (2) die Option benötigt, um zur Standardauswahl zurückzukehren. Wenn Sie jQuery verwenden, ist dies eine schwierige Option:

var $selects = $('select');
$selects.change(function () {
  var option = $('option:default', this);
  if(option && option.is(':selected')) {
    $(this).css('color', '#999');
  }
  else {
    $(this).css('color', '#555');
  }
});

$selects.each(function() {
  $(this).change();
});

option {
    color: #555;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="in-op">
    <option default selected>Select Option</option>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
</select>

Ich bin nicht zufrieden mit HTML / CSS-Lösungen, daher habe ich beschlossen, eine benutzerdefinierte Lösung selectmit JavaScript zu erstellen .

Dies ist etwas, das ich in den letzten 30 Minuten geschrieben habe, daher kann es weiter verbessert werden.

Sie müssen lediglich eine einfache Liste mit wenigen Datenattributen erstellen. Der Code verwandelt die Liste automatisch in eine auswählbare Dropdown-Liste. Außerdem wird ein ausgeblendeter inputWert hinzugefügt , um den ausgewählten Wert zu speichern, sodass er in einem Formular verwendet werden kann.

Eingang:

<ul class="select" data-placeholder="Role" data-name="role">
  <li data-value="admin">Administrator</li>
  <li data-value="mod">Moderator</li>
  <li data-value="user">User</li>
</ul>

Ausgabe:

<div class="ul-select-container">
    <input type="hidden" name="role" class="hidden">
    <div class="selected placeholder">
        <span class="text">Role</span>
        <span class="icon">▼</span>
    </div>
    <ul class="select" data-placeholder="Role" data-name="role">
        <li class="placeholder">Role</li>
        <li data-value="admin">Administrator</li>
        <li data-value="mod">Moderator</li>
        <li data-value="user">User</li>
    </ul>
</div>

Der Text des Elements, das ein Platzhalter sein soll, ist ausgegraut. Der Platzhalter kann ausgewählt werden, falls der Benutzer seine Auswahl rückgängig machen möchte. Auch mit CSS können alle Nachteile selectüberwunden werden (z. B. Unfähigkeit, die Optionen zu gestalten).

// Helper function to create elements faster/easier
// https://github.com/akinuri/js-lib/blob/master/element.js
var elem = function(tagName, attributes, children, isHTML) {
  let parent;
  if (typeof tagName == "string") {
    parent = document.createElement(tagName);
  } else if (tagName instanceof HTMLElement) {
    parent = tagName;
  }
  if (attributes) {
    for (let attribute in attributes) {
      parent.setAttribute(attribute, attributes[attribute]);
    }
  }
  var isHTML = isHTML || null;
  if (children || children == 0) {
    elem.append(parent, children, isHTML);
  }
  return parent;
};
elem.append = function(parent, children, isHTML) {
  if (parent instanceof HTMLTextAreaElement || parent instanceof HTMLInputElement) {
    if (children instanceof Text || typeof children == "string" || typeof children == "number") {
      parent.value = children;
    } else if (children instanceof Array) {
      children.forEach(function(child) {
        elem.append(parent, child);
      });
    } else if (typeof children == "function") {
      elem.append(parent, children());
    }
  } else {
    if (children instanceof HTMLElement || children instanceof Text) {
      parent.appendChild(children);
    } else if (typeof children == "string" || typeof children == "number") {
      if (isHTML) {
        parent.innerHTML += children;
      } else {
        parent.appendChild(document.createTextNode(children));
      }
    } else if (children instanceof Array) {
      children.forEach(function(child) {
        elem.append(parent, child);
      });
    } else if (typeof children == "function") {
      elem.append(parent, children());
    }
  }
};


// Initialize all selects on the page
$("ul.select").each(function() {
  var parent    = this.parentElement;
  var refElem   = this.nextElementSibling;
  var container = elem("div", {"class": "ul-select-container"});
  var hidden    = elem("input", {"type": "hidden", "name": this.dataset.name, "class": "hidden"});
  var selected  = elem("div", {"class": "selected placeholder"}, [
    elem("span", {"class": "text"}, this.dataset.placeholder),
    elem("span", {"class": "icon"}, "▼", true),
  ]);
  var placeholder = elem("li", {"class": "placeholder"}, this.dataset.placeholder);
  this.insertBefore(placeholder, this.children[0]);
  container.appendChild(hidden);
  container.appendChild(selected);
  container.appendChild(this);
  parent.insertBefore(container, refElem);
});

// Update necessary elements with the selected option
$(".ul-select-container ul li").on("click", function() {
  var text     = this.innerText;
  var value    = this.dataset.value || "";
  var selected = this.parentElement.previousElementSibling;
  var hidden   = selected.previousElementSibling;
  hidden.value = selected.dataset.value = value;
  selected.children[0].innerText = text;
  if (this.classList.contains("placeholder")) {
    selected.classList.add("placeholder");
  } else {
    selected.classList.remove("placeholder");
  }
  selected.parentElement.classList.remove("visible");
});

// Open select dropdown
$(".ul-select-container .selected").on("click", function() {
  if (this.parentElement.classList.contains("visible")) {
    this.parentElement.classList.remove("visible");
  } else {
    this.parentElement.classList.add("visible");
  }
});

// Close select when focus is lost
$(document).on("click", function(e) {
  var container = $(e.target).closest(".ul-select-container");
  if (container.length == 0) {
    $(".ul-select-container.visible").removeClass("visible");
  }
});

.ul-select-container {
  width: 200px;
  display: table;
  position: relative;
  margin: 1em 0;
}
.ul-select-container.visible ul {
  display: block;
  padding: 0;
  list-style: none;
  margin: 0;
}
.ul-select-container ul {
  background-color: white;
  border: 1px solid hsla(0, 0%, 60%);
  border-top: none;
  -webkit-user-select: none;
  display: none;
  position: absolute;
  width: 100%;
  z-index: 999;
}
.ul-select-container ul li {
  padding: 2px 5px;
}
.ul-select-container ul li.placeholder {
  opacity: 0.5;
}
.ul-select-container ul li:hover {
  background-color: dodgerblue;
  color: white;
}
.ul-select-container ul li.placeholder:hover {
  background-color: rgba(0, 0, 0, .1);
  color: initial;
}
.ul-select-container .selected {
  background-color: white;
  padding: 3px 10px 4px;
  padding: 2px 5px;
  border: 1px solid hsla(0, 0%, 60%);
  -webkit-user-select: none;
}
.ul-select-container .selected {
  display: flex;
  justify-content: space-between;
}
.ul-select-container .selected.placeholder .text {
  color: rgba(0, 0, 0, .5);
}
.ul-select-container .selected .icon {
  font-size: .7em;
  display: flex;
  align-items: center;
  opacity: 0.8;
}
.ul-select-container:hover .selected {
  border: 1px solid hsla(0, 0%, 30%);
}
.ul-select-container:hover .selected .icon {
  opacity: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul class="select" data-placeholder="Role" data-name="role">
  <li data-value="admin">Administrator</li>
  <li data-value="mod">Moderator</li>
  <li data-value="user">User</li>
</ul>

<ul class="select" data-placeholder="Sex" data-name="sex">
  <li data-value="male">Male</li>
  <li data-value="female">Female</li>
</ul>

Update : Ich habe dies verbessert (Auswahl mit den Tasten Auf / Ab / Eingabe), die Ausgabe ein wenig aufgeräumt und daraus ein Objekt gemacht. Aktueller Output:

<div class="li-select-container">
    <input type="text" readonly="" placeholder="Role" title="Role">
    <span class="arrow">▼</span>
    <ul class="select">
        <li class="placeholder">Role</li>
        <li data-value="admin">Administrator</li>
        <li data-value="mod">Moderator</li>
        <li data-value="user">User</li>
    </ul>
</div>

Initialisierung:

new Liselect(document.getElementsByTagName("ul")[0]);

Zur weiteren Prüfung: JSFiddle , GitHub (umbenannt).

Update: Ich habe dies wieder umgeschrieben. Anstatt eine Liste zu verwenden, können wir einfach eine Auswahl verwenden. Auf diese Weise funktioniert es auch ohne JavaScript (falls es deaktiviert ist).

Eingang:

<select name="role" data-placeholder="Role" required title="Role">
    <option value="admin">Administrator</option>
    <option value="mod">Moderator</option>
    <option>User</option>
</select>

new Advancelect(document.getElementsByTagName("select")[0]);

Ausgabe:

<div class="advanced-select">
    <input type="text" readonly="" placeholder="Role" title="Role" required="" name="role">
    <span class="arrow">▼</span>
    <ul>
        <li class="placeholder">Role</li>
        <li data-value="admin">Administrator</li>
        <li data-value="mod">Moderator</li>
        <li>User</li>
    </ul>
</div>

JSFiddle , GitHub .

Sie benötigen eine Formularüberprüfung, und moderne Browser bieten dies von Grund auf neu an.

Sie müssen also nicht darauf achten, dass der Benutzer das Feld nicht auswählen kann. Denn wenn er es tut, sagt ihm die Browser-Validierung, dass dies eine falsche Auswahl ist.

Der Browser hat die Validierungsfunktion checkValidity () eingebaut .

Bootstrap hat dort auch ein schönes Beispiel.

HTML

<form class="needs-validation">
  <select required>
    <option value="">Please select an option</option>
    <option value="1">Foo</option>
    <option value="2">Bar</option>
  </select>
<form>

Javascript

form = document.getElementByClassName('needs-validation');
if(form.checkValidity() === true) {
  //form validation succeeded
} else {
  //form validation failed
}

Sie können dies tun , ohne Verwendung Javascriptnur mit HTMLSie müssen wählen Sie die Option zum Set Standard disabled=""und selected=""und wählen Sie Tag required="".Browser erlaubt keine Benutzer das Formular abzuschicken ohne eine Option auszuführen.

<form action="" method="POST">
    <select name="in-op" required="">
        <option disabled="" selected="">Select Option</option>
        <option>Option 1</option>
        <option>Option 2</option>
        <option>Option 3</option>
    </select>
    <input type="submit" value="Submit">
</form>

In Angular können wir eine Option als Platzhalter hinzufügen , die in der Options-Dropdown-Liste ausgeblendet werden kann. Wir können sogar ein benutzerdefiniertes Dropdown-Symbol als Hintergrund hinzufügen , das das Dropdown- Symbol des Browsers ersetzt .

Der Trick besteht darin , Platzhalter- CSS nur zu aktivieren, wenn der Wert nicht ausgewählt ist

/ ** Meine Komponentenvorlage * /

 <div class="dropdown">
      <select [ngClass]="{'placeholder': !myForm.value.myField}"
 class="form-control" formControlName="myField">
        <option value="" hidden >Select a Gender</option>
        <option value="Male">Male</option>
        <option value="Female">Female</option>
      </select>
    </div>

/ ** Meine Komponente.TS * /

constructor(fb: FormBuilder) {
  this.myForm = this.fb.build({
    myField: ''
  });
}

/**global.scss*/

.dropdown {
  width: 100%;
  height: 30px;
  overflow: hidden;
  background: no-repeat white;
  background-image:url('angle-arrow-down.svg');
  background-position: center right;
  select {
    background: transparent;
    padding: 3px;
    font-size: 1.2em;
    height: 30px;
    width: 100%;
    overflow: hidden;

    /*For moz*/
    -moz-appearance: none;
    /* IE10 */
    &::-ms-expand {
      display: none;
    }
    /*For chrome*/
    -webkit-appearance:none;
    &.placeholder {
      opacity: 0.7;
      color: theme-color('mutedColor');
    }
    option {
      color: black;
    }
  }
}

Lösung für Angular 2

Erstellen Sie eine Beschriftung über der Auswahl

<label class="hidden-label" for="IsActive"
    *ngIf="filterIsActive == undefined">Placeholder text</label>
<select class="form-control form-control-sm" type="text" name="filterIsActive"
    [(ngModel)]="filterIsActive" id="IsActive">
    <option value="true">true</option>
    <option value="false">false</option>
</select>

und wenden Sie CSS an, um es oben zu platzieren

.hidden-label {
    position: absolute;
    margin-top: .34rem;
    margin-left: .56rem;
    font-style: italic;
    pointer-events: none;
}

pointer-events: none Mit dieser Option können Sie die Auswahl anzeigen, wenn Sie auf die Beschriftung klicken. Diese Option wird ausgeblendet, wenn Sie eine Option auswählen.

eckig html CSS

Hier ist mein Beitrag. Haml + CoffeeScript + SCSS

Haml

=f.collection_select :country_id, [us] + Country.all, :id, :name, {prompt: t('user.country')}, class: 'form-control'

CoffeeScript

  $('select').on 'change', ->
    if $(this).val()
      $(this).css('color', 'black')
    else
      $(this).css('color', 'gray')
  $('select').change()

SCSS

select option {
  color: black;
}

Es ist möglich, nur CSS zu verwenden, indem Sie den Servercode ändern und nur die Klassenstile abhängig vom aktuellen Wert der Eigenschaft festlegen. Diese Methode scheint jedoch einfacher und sauberer zu sein.

$('select').on('change', function() {
  if ($(this).val()) {
    return $(this).css('color', 'black');
  } else {
    return $(this).css('color', 'gray');
  }
});

$('select').change();

    select option {
      color: black;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control" name="user[country_id]" id="user_country_id">
  <option value="">Country</option>
                      <option value="231">United States</option>
                      <option value="1">Andorra</option>
                      <option value="2">Afghanistan</option>
                      <option value="248">Zimbabwe</option></select>

Sie können mehr CSS ( select option:first-child) hinzufügen , um den Platzhalter beim Öffnen grau zu halten, aber das war mir egal.

Versuchen Sie dies zur Abwechslung:

$("select").css("color", "#757575");
$(document).on("change", "select", function(){
    if ($(this).val() != "") {
        $(this).css("color", "");
    } 
    else {
        $(this).css("color", "#757575");
    }
});

Hier ist ein funktionierendes Beispiel, wie dies mit reinem JavaScript erreicht werden kann, das die Optionsfarbe nach dem ersten Klick verarbeitet:

<!DOCTYPE html>
<html>
  <head>
    <style>
      #myselect {
        color: gray;
      }
    </style>
  </head>

  <body>
    <select id="myselect">
      <option disabled selected>Choose Item
      </option>

      <option>Item 1
      </option>

      <option>Item 2
      </option>

      <option>Item 3
      </option>
    </select>

    <script>
      // Add event listener to change color in the first click
      document.getElementById("myselect").addEventListener("click", setColor)
      function setColor()
      {
        var combo = document.getElementById("myselect");
        combo.style.color = 'red';
        // Remove Event Listener after the color is changed at the first click
        combo.removeEventListener("click", setColor);
      }
    </script>
  </body>
</html>

Aufbauend auf der Antwort von MattW können Sie die Option Platzhalter auswählen im Dropdown-Menü sichtbar machen, nachdem eine gültige Auswahl getroffen wurde, indem Sie sie nur bedingt ausblenden, während der Platzhalter ausgewählt bleibt (und die Auswahl daher ungültig ist).

select:required:invalid {
  color: gray;
}
select:invalid > 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>

Basierend auf Albireos Antwort verwendet diese Version kein jQuery und die CSS-Spezifität ist besser.

const triggerEvent = (el, eventName) => {
  let event = document.createEvent('HTMLEvents')
  event.initEvent(eventName, true, false)
  el.dispatchEvent(event)
}

let select = document.querySelector('.placeholder-select')
select.addEventListener('change', (e) => {
  e.target.classList[e.target.value == 0 ? 'add' : 'remove']('empty')
})
triggerEvent(select, 'change')

.placeholder-select option {
  color: #000000;
}
.placeholder-select option:first-child {
  color: #444444;
  font-style: italic;
  font-weight: bold;
}
.placeholder-select.empty {
  color: #7F7F7F;
}

<select class="placeholder-select">
  <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>