it-swarm.com.de

Wie erstelle ich einen Platzhalter für ein Auswahlfeld?

Ich verwende Platzhalter für Texteingaben, was gut funktioniert. Ich möchte aber auch einen Platzhalter für meine Auswahlboxen verwenden. Natürlich kann ich einfach 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 in Schwarz statt in Hellgrau. Meine Lösung könnte also CSS-basiert sein. jQuery ist auch gut. 

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

option:first {
    color: #999;
}

Bearbeiten: Die Frage ist: wie werden in Selectboxen Platzhalter erstellt? Aber es wurde schon geantwortet, Prost.

Die Verwendung dieses Ergebnisses führt dazu, dass der ausgewählte Wert immer grau ist (auch nach Auswahl einer reellen Option):

select {
    color:#999;
}
1246
Thomas

Wie wäre es mit einem Nicht-CSS - keine Javascript/jQuery-Antwort?

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

2553
David

Ich 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 Disabled stoppt die Auswahl von <option> sowohl mit der Maus als auch mit der Tastatur. Mit 'display:none' kann der Benutzer jedoch weiterhin über die Tastaturpfeile auswählen. Der 'display:none'-Stil lässt das Listenfeld einfach 'Nizza' aussehen.

Anmerkung: Wenn Sie ein leeres value-Attribut für die Option "Platzhalter" verwenden, kann die Überprüfung (erforderliches Attribut) um den "Platzhalter" herumgehen. Wenn also die Option nicht geändert wird, ist sie erforderlich. Der Browser sollte den Benutzer auffordern, eine Option aus der Liste auszuwählen.

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 (Platzhalter ist in der Dropdown-Liste sichtbar, kann jedoch nicht ausgewählt werden)
  • Microsoft Internet Explorer - Version 11 (Platzhalter ist in der Dropdown-Liste sichtbar, kann jedoch nicht ausgewählt werden)
  • Project Spartan - v.15.10130 (Platzhalter ist in der Dropdown-Liste sichtbar, kann jedoch nicht ausgewählt werden)

Update (Oktober 2015):

Der style="display: none" wurde zugunsten des HTML5-Attributs hidden entfernt, das breite Unterstützung bietet. Das hidden-Element hat ähnliche Eigenschaften wie display: none in Safari, IE (Project Spartan muss überprüft werden), wobei die option im Dropdown-Menü sichtbar ist, jedoch nicht ausgewählt werden kann.

Update (Januar 2016):

Wenn das select-Element required ist, kann die :invalid-CSS-Pseudoklasse verwendet werden, mit der Sie das select-Element im Status "Platzhalter" formatieren können. :invalid funktioniert hier aufgrund des leeren Werts im Platzhalter option.

Sobald ein Wert festgelegt wurde, wird die :invalid-Pseudoklasse gelöscht. Sie können optional auch :valid verwenden, wenn Sie dies wünschen.

Die meisten Browser unterstützen diese Pseudoklasse. IE10 +. Dies funktioniert am besten mit benutzerdefinierten select-Elementen. In einigen Fällen, d. H. (Mac in Chrome/Safari), müssen Sie die Standarddarstellung des Feldes select so ändern, dass bestimmte Stile angezeigt werden, d. H. background-color, color. Einige Beispiele und weitere Informationen zur Kompatibilität finden Sie unter developer.mozilla.org .

Aussehen nativer Elemente Mac in Chrome:

Select box native Mac in Chrome

Verwenden eines geänderten Rahmenelements Mac in Chrome:

Altered select box Mac in Chrome

692
William Isted

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>

205
MattW

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/

97
Albireo

Ich habe gerade ein verstecktes Attribut in einer Option wie unten hinzugefügt. Es funktioniert gut für mich.

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

38
Ajithkumar S

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>

26
Dani-Br

Ich hatte das gleiche Problem und beim Suchen stieß ich auf diese Frage, und nachdem ich eine gute Lösung für mich gefunden habe, möchte ich sie gerne mit Ihnen teilen, falls jemand davon profitieren kann. Hier ist es: :

<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 zunächst keine Grautöne ausgewählt hat, entfernt JS die Klasse place_holder. Ich hoffe, das hilft jemandem :)

Update: Dank @ user1096901 können Sie als Umgehung für den Browser IE erneut die Klasse place_holder hinzufügen, falls die erste Option erneut ausgewählt wird :)

21
rramiii

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 nicht an, sondern setzt den Wert der Option als Standard.

Wenn Sie jedoch nur keinen Platzhalter mögen, der die gleiche Farbe wie der Rest hat , können Sie ihn folgendermaßen 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.

14
Jacob Schneider

Ich sehe Anzeichen für richtige Antworten, aber dies zusammenzufassen, wäre 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>

13
user3520445

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>

13
Will Wang

Hier habe ich David Antwort modifiziert (akzeptierte Antwort). Bei seiner Antwort legte er deaktiviertes und ausgewähltes Attribut auf das Options-Tag, aber wenn wir auch das ausgeblendete Tag setzen, wird es viel besser aussehen. Durch das Hinzufügen eines zusätzlichen verborgenen Attributs im Options-Tag wird die Option "Wählen Sie Ihre Option" deaktiviert 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>

12
Nawaraj

Der Benutzer sollte den Platzhalter nicht in ausgewählten Optionen sehen. Ich empfehle, das hidden-Attribut für die Platzhalteroption zu verwenden, und Sie brauchen das selected-Attribut nicht für diese Option.

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>

4
Roman Yakoviv

Wenn Sie eckig verwenden, gehen Sie so vor

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

4
arun kumar

Eine andere Möglichkeit in JS:

 $('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

4

Hier ist eineCSS-Lösung, die wunderbar funktioniert. Der Inhalt wird nach dem enthaltenden Element hinzugefügt (und absolut relativ zum Container positioniert) ( via: after pseudo-class ). Es erhält seinen Text aus dem von mir definierten Platzhalterattribut, wo ich die Direktive verwendet habe ( attr (Platzhalter) ). Ein weiterer Schlüsselfaktor ist pointer-events: none - Dadurch können Klicks auf den Platzhaltertext an das select übergeben werden. Andernfalls wird es nicht angezeigt, wenn der Benutzer auf den Text klickt.

Ich füge die .empty -Klasse selbst in meiner select-Direktive hinzu, aber normalerweise finde ich, dass das Hinzufügen/Entfernen von .ng-empty für mich (/ ich nehme an, es ist b/c mein Codebeispiel)

(Das Beispiel zeigt auch, wie HTML-Elemente in angleJS eingebunden 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>

2
flyer

Ich konnte keines davon momentan zum Laufen bringen, weil es für mich (1) nicht erforderlich ist und (2) die Option benötigt, um zur Standardeinstellung zurückzukehren. Wenn Sie also Jquery verwenden, haben Sie hier eine Option für schwere Aufgaben:

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>

2
Eric G

Sie können dies tun, ohne Javascript nur mit HTML zu verwenden. Sie müssen die Standardauswahloption .__ festlegen. disabled="" und selected="" und wählen Sie das Tag required="". Browser .__ aus. Der Benutzer kann das Formular nicht senden, ohne eine Option auszuwählen.

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

Hier ein Arbeitsbeispiel wie man dies mit reinem Javascript erreicht, das die Optionsfarbe nach dem ersten Klick behandelt:

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

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

<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, vielleicht auch in anderen Browsern, aber ich habe es nicht geprüft.

1
fbparis

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");
    }
});
0
Jordan Lipana

Ich bin nicht mit HTML/CSS-Lösungen zufrieden, daher habe ich mich entschlossen, ein benutzerdefiniertes select mit JS zu erstellen.

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

Sie müssen lediglich eine einfache Liste mit wenigen Datenattributen erstellen. Der Code verwandelt die Liste automatisch in eine auswählbare Dropdown-Liste. Es fügt außerdem ein verstecktes input hinzu, um den ausgewählten Wert zu speichern, damit 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 ist wählbar, falls der Benutzer seine Wahl rückgängig machen möchte. Auch unter Verwendung von CSS können alle Nachteile von select überwunden werden (z. B. Unfähigkeit der Gestaltung der Optionen). 

// 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"}, "&#9660;", 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/Enter). Die Ausgabe wurde ein wenig aufgeräumt und in ein Objekt verwandelt. 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]);

Für die weitere Prüfung: JSFiddle ,  GitHub (umbenannt).


Update: Dies wurde erneut geschrieben. Anstelle einer Liste können wir einfach eine Auswahl verwenden. Auf diese Weise funktioniert es auch ohne JS (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 .

0
akinuri

Eingabe [type="text"] Stilplatzhalter für ausgewählte Elemente

Die folgende Lösung simuliert einen Platzhalter, der sich auf ein input[type="text"]-Element bezieht:

$('.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>

0
Grant Miller

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

Ich möchte nur hinzufügen, wie ich diese Antwort für eine Controlled-Select-React-Komponente übernahm, weil ich einige Versuche brauchte, um die Sache herauszufinden. Es wäre sehr einfach, react-select zu integrieren und damit fertig zu werden. Wenn Sie jedoch nicht die erstaunliche Funktionalität dieses Repos benötigen, die ich für das fragliche Projekt nicht zur Verfügung stelle, müssen Sie meinem Paket keine weiteren KB hinzufügen. Beachten Sie, dass react-select Platzhalter in selects durch ein komplexes System aus verschiedenen inputs- und html-Elementen behandelt.

In React für eine gesteuerte Komponente können Sie das selected-Attribut nicht zu Ihren Optionen hinzufügen. React behandelt den Status des select über ein value-Attribut auf dem select selbst sowie einen Änderungshandler, wobei der Wert mit einem der Wertattribute in den Optionen selbst übereinstimmen soll.

Wie zum Beispiel 

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

Da es unangemessen wäre und tatsächlich einen Fehler beim Hinzufügen des selected-Attributs zu einer der Optionen auslösen würde, was dann?

Die Antwort ist einfach, wenn Sie darüber nachdenken. Da wir möchten, dass unsere erste option sowohl selected als auch disabled und hidden ist, müssen wir drei Dinge tun:

  1. Fügen Sie das Attribut hidden und disabled dem ersten definierten option hinzu.
  2. Legen Sie den Wert des ersten option als leere Zeichenfolge fest.
  3. Initialisieren Sie den Wert von select so, dass er auch eine leere Zeichenfolge ist.
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 formatieren (oder über eine className, wenn Sie möchten).

select:invalid { color: gray; }
0
wlh

Lösung für Angular 2

Erstellen Sie ein Etikett ü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 wende CSS an, um es oben zu platzieren

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

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

 eckightmlcss

0
edu

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

Der Trick steht an Platzhalter aktivieren css nur, wenn Wert ist nicht ausgewählt

/ ** 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;
    }
  }
}
0
Mukundhan

Diese HTML + CSS-Lösung hat für mich 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...

0
Akash