Saya menggunakan placeholder untuk input teks yang berfungsi dengan baik. Tapi saya juga ingin menggunakan placeholder untuk kotak pilih saya. Tentu saja saya bisa menggunakan kode ini:

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

Tapi 'Pilih opsi Anda' berwarna hitam, bukan lightgrey. Jadi solusi saya mungkin berbasis CSS. jQuery juga baik-baik saja.

Ini hanya membuat opsi menjadi abu-abu di dropdown (jadi setelah mengklik panah):

option:first {
    color: #999;
}

Pertanyaannya adalah: Bagaimana cara orang membuat placeholder di kotak pilih? Tapi sudah dijawab, tepuk tangan.

Dan menggunakan ini menghasilkan nilai yang dipilih selalu menjadi abu-abu (bahkan setelah memilih opsi nyata):

select {
    color: #999;
}

Jawaban non-CSS - tanpa JavaScript / jQuery:

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

Saya baru saja menemukan pertanyaan ini, dan inilah yang berfungsi di Firefox dan Chrome (setidaknya):

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

The Disabled pilihan menghentikan <option>makhluk yang dipilih dengan baik mouse dan keyboard, sedangkan hanya menggunakan 'display:none'memungkinkan pengguna untuk tetap memilih melalui panah keyboard. The 'display:none'gaya hanya membuat kotak daftar tampilan 'bagus'.

Catatan: Menggunakan valueatribut kosong pada opsi "placeholder" memungkinkan validasi (atribut yang diperlukan) untuk mengatasi "placeholder", jadi jika opsi tidak berubah, tetapi diperlukan, browser harus meminta pengguna untuk memilih opsi dari daftar.

Pembaruan (Juli 2015):

Metode ini dikonfirmasi berfungsi di browser berikut:

• Google Chrome - v.43.0.2357.132
• Mozilla Firefox - v.39.0
• Safari - v.8.0.7 (placeholder terlihat dalam dropdown, tetapi tidak dapat dipilih)
• Microsoft Internet Explorer - v.11 (Placeholder terlihat dalam dropdown tetapi tidak dapat dipilih)
• Project Spartan - v.15.10130 (placeholder terlihat dalam dropdown, tetapi tidak dapat dipilih)

Pembaruan (Oktober 2015):

Saya menghapus style="display: none"mendukung atribut HTML5 hiddenyang memiliki dukungan luas. The hiddenelemen memiliki ciri-ciri yang sama seperti display: nonedi Safari, Internet Explorer, (Project Spartan perlu memeriksa) di mana optionterlihat dalam dropdown, tetapi tidak dipilih.

Pembaruan (Januari 2016):

Ketika selectelemen requireditu memungkinkan penggunaan :invalidpseudo-class CSS yang memungkinkan Anda untuk gaya selectelemen ketika dalam keadaan "placeholder". :invalidberfungsi di sini karena nilai kosong di placeholder option.

Setelah nilai ditetapkan, :invalidpseudo-class akan dijatuhkan. Anda juga dapat menggunakan :validjika Anda menginginkannya.

Sebagian besar browser mendukung kelas semu ini. Internet Explorer 10 dan yang lebih baru. Ini bekerja paling baik dengan selectelemen gaya khusus ; dalam beberapa kasus yaitu (Mac di Chrome / Safari) Anda harus mengubah tampilan default selectkotak sehingga gaya tertentu ditampilkan, yaitu, background-colordan color. Anda dapat menemukan beberapa contoh dan lebih banyak tentang kompatibilitas di developer.mozilla.org .

Penampilan elemen asli Mac di Chrome:

Menggunakan elemen batas yang diubah Mac di Chrome:

Untuk bidang yang wajib diisi, ada solusi murni-CSS di browser modern:

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>

Sesuatu seperti ini:

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();

Contoh kerja: http://jsfiddle.net/Zmf6t/

Saya baru saja menambahkan atribut tersembunyi dalam optionseperti di bawah ini. Ini bekerja dengan baik untuk saya.

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

Solusi di bawah juga berfungsi di Firefox, tanpa JavaScript apa pun:

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>

Saya memiliki masalah yang sama dan ketika mencari saya menemukan pertanyaan ini, dan setelah saya menemukan solusi yang baik untuk saya, saya ingin membagikannya dengan kalian kalau-kalau ada yang bisa mendapat manfaat dari itu.

Ini dia:

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

Setelah pelanggan melakukan pemilihan pertama, tidak perlu warna abu-abu, jadi kode JavaScript menghapus kelas place_holder.

Berkat @ user1096901, sebagai solusi untuk browser Internet Explorer, Anda dapat menambahkan place_holderkelas lagi jika opsi pertama dipilih lagi :)

Tidak ada kebutuhan untuk JavaScript atau CSS, hanya tiga atribut:

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

Sama sekali tidak menunjukkan opsi; itu hanya menetapkan nilai opsi sebagai default.

Namun, jika Anda tidak menyukai placeholder yang warnanya sama dengan yang lain , Anda dapat memperbaikinya sebaris seperti ini:

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

Jelas, Anda dapat memisahkan fungsi dan setidaknya CSS pilihan ke dalam file terpisah.

Catatan: fungsi onload memperbaiki bug penyegaran.

Pengguna seharusnya tidak melihat pengganti di opsi yang dipilih. Saya sarankan untuk menggunakan hiddenatribut untuk opsi placeholder, dan Anda tidak perlu selectedatribut untuk opsi ini. Anda bisa memasukkannya sebagai yang pertama.

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>

Di sini saya telah memodifikasi jawaban David (jawaban yang diterima). Pada jawabannya, dia meletakkan atribut yang dinonaktifkan dan dipilih pada optiontag, tetapi ketika kita juga menaruh tag tersembunyi maka itu akan terlihat jauh lebih baik.

Dengan menambahkan atribut tersembunyi tambahan pada optiontag, itu akan mencegah opsi "Pilih opsi Anda" dari memilih ulang setelah opsi "Durr" dipilih.

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

Ini milik saya:

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>

Saya melihat tanda-tanda jawaban yang benar, tetapi untuk menyatukan semuanya, ini akan menjadi solusi saya:

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>

Jika Anda menggunakan Angular, lakukan seperti ini:

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

HTML + CSSSolusi ini bekerja untuk saya:

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>

Semoga berhasil...

Kemungkinan lain dalam 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

Saya suka solusi yang diterima , dan ini berfungsi dengan baik tanpa JavaScript.

Saya hanya ingin menambahkan bagaimana saya mengadopsi jawaban ini untuk Komponen Bereaksi-pilih yang terkontrol , karena butuh beberapa percobaan untuk mengetahuinya. Ini akan sangat sederhana untuk digabungkan react-selectdan dilakukan dengan itu, tetapi kecuali jika Anda memerlukan fungsionalitas luar biasa yang disediakan oleh repositori ini, yang saya tidak lakukan untuk proyek yang dimaksud, tidak perlu menambahkan lagi kilobyte ke bundel saya. Catatan, react-selectmenangani placeholder dalam menyeleksi melalui sistem kompleks dari berbagai inputsdan htmlelemen.

Di Bereaksi, untuk komponen yang dikendalikan , Anda tidak bisa menambahkan selectedatribut ke opsi Anda. Bereaksi menangani keadaan pemilihan melalui valueatribut pada selectdirinya sendiri, bersama dengan penangan perubahan, di mana nilai harus cocok dengan salah satu atribut nilai dalam opsi itu sendiri.

Seperti misalnya

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

Karena itu akan tidak tepat dan pada kenyataannya akan membuat kesalahan untuk menambahkan selectedatribut ke salah satu opsi, lalu bagaimana?

Jawabannya sederhana setelah Anda memikirkannya. Karena kita ingin kami pertama optionmenjadi selectedserta disableddan hidden, kita perlu melakukan tiga hal:

1. Tambahkan hiddendan disabledatribut ke yang didefinisikan pertama option.
2. Tetapkan nilai yang pertama optionmenjadi string kosong.
3. Inisialisasi nilai selectjuga string kosong.

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>

Sekarang Anda dapat mengatur gaya pilih seperti yang ditunjukkan di atas (atau melalui classNamejika Anda suka).

select:invalid { color: gray; }

Input [type="text"]Style Placeholder untuk Elemen Pilih

Solusi berikut mensimulasikan placeholder yang terkait dengan input[type="text"]elemen:

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

Saya ingin SELECT menjadi abu-abu sampai terpilih jadi untuk bagian HTML ini:

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

Saya telah menambahkan definisi CSS ini:

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

Ini berfungsi seperti yang diharapkan di Chrome / Safari dan mungkin juga di browser lain, tapi saya belum memeriksanya.

Berikut ini adalah solusi CSS yang bekerja dengan indah. Konten ditambahkan (dan benar-benar diposisikan relatif terhadap wadah) setelah elemen yang mengandung ( via: setelah pseudo-class ).

Ia mendapatkan teksnya dari atribut placeholder yang saya tentukan di mana saya menggunakan direktif ( attr (placeholder) ). Faktor kunci lainnya adalah peristiwa-pointer: tidak ada - ini memungkinkan klik pada teks placeholder untuk melewati ke pilih. Kalau tidak, itu tidak akan drop down jika pengguna mengklik teks.

Saya menambahkan kelas .ty sendiri di direktif pilih saya, tetapi biasanya saya menemukan bahwa sudut menambahkan / menghapus .ng-kosong untuk saya (saya berasumsi itu karena saya menyuntikkan versi 1.2 dari Angular dalam sampel kode saya).

(Sampel juga menunjukkan cara membungkus elemen HTML di AngularJS untuk membuat input khusus Anda sendiri)

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>

Saya tidak bisa mendapatkan semua ini untuk bekerja saat ini, karena bagi saya itu (1) tidak diperlukan dan (2) perlu opsi untuk kembali ke default yang dapat dipilih. Jadi, inilah opsi yang sulit jika Anda menggunakan jQuery:

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>

Saya tidak puas dengan solusi khusus HTML / CSS, jadi saya memutuskan untuk membuat custom selectmenggunakan JavaScript.

Ini adalah sesuatu yang saya tulis dalam 30 menit terakhir, sehingga dapat lebih ditingkatkan.

Yang harus Anda lakukan adalah membuat daftar sederhana dengan beberapa atribut data. Kode secara otomatis mengubah daftar menjadi dropdown yang dapat dipilih. Itu juga menambahkan tersembunyi inputuntuk menyimpan nilai yang dipilih, sehingga bisa digunakan dalam formulir.

Memasukkan:

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

Keluaran:

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

Teks item yang seharusnya menjadi pengganti adalah abu-abu. Pengganti dapat dipilih, jika pengguna ingin mengembalikan pilihannya. Juga menggunakan CSS, semua kelemahan selectdapat diatasi (misalnya, ketidakmampuan penataan opsi).

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

Pembaruan : Saya telah memperbaiki ini (pilihan menggunakan tombol naik / turun / masuk), merapikan output sedikit, dan mengubahnya menjadi objek. Keluaran saat ini:

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

Inisialisasi:

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

Untuk pemeriksaan lebih lanjut: JSFiddle , GitHub (diganti namanya).

Pembaruan: Saya telah menulis ulang ini lagi. Alih-alih menggunakan daftar, kita bisa menggunakan pilih. Dengan cara ini akan berfungsi bahkan tanpa JavaScript (kalau-kalau dinonaktifkan).

Memasukkan:

<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]);

Keluaran:

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

Anda memerlukan validasi formulir dan browser modern menawarkan ini dari awal.

Jadi Anda tidak perlu berhati-hati agar pengguna tidak bisa memilih bidang. Karena ketika dia melakukannya, validasi browser akan memberitahunya, bahwa ini adalah pilihan yang salah.

Browser dibangun pada fungsi validasi checkValidity () .

Bootstrap memiliki contoh yang bagus juga.

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
}

Anda dapat melakukan ini tanpa Javascripthanya menggunakan HTMLAnda perlu mengatur opsi pilih default disabled=""dan selected=""dan memilih tag required="".Browser tidak memungkinkan pengguna untuk mengirimkan formulir tanpa memilih opsi.

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

Di Angular kita bisa menambahkan opsi sebagai placeholder yang bisa disembunyikan di dropdown opsi. Kami bahkan dapat menambahkan ikon dropdown khusus sebagai latar belakang yang menggantikan ikon dropdown browser .

The trick adalah untuk memungkinkan placeholder css hanya ketika nilai tidak dipilih

/ ** Template Komponen Saya * /

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

/ ** Komponen Saya.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;
    }
  }
}

Solusi untuk Angular 2

Buat label di atas pilih

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

dan terapkan CSS untuk menempatkannya di atas

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

pointer-events: none memungkinkan Anda untuk menampilkan pilih ketika Anda mengklik label, yang disembunyikan ketika Anda memilih opsi.

bersudut html css

Inilah kontribusi saya. 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;
}

Dimungkinkan hanya menggunakan CSS dengan mengubah kode server dan hanya mengatur gaya kelas tergantung pada nilai properti saat ini, tetapi cara ini tampaknya lebih mudah dan bersih.

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

Anda bisa menambahkan lebih banyak CSS ( select option:first-child) untuk menjaga abu-abu placeholder ketika terbuka, tapi saya tidak peduli tentang itu.

Coba ini untuk perubahan:

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

Berikut ini adalah contoh kerja bagaimana mencapainya dengan JavaScript murni yang menangani warna opsi setelah klik pertama:

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

Berdasarkan jawaban MattW , Anda dapat membuat opsi pilih placeholder terlihat di menu drop-down setelah pilihan yang valid telah dibuat, dengan menyembunyikannya secara kondisional hanya ketika placeholder tetap dipilih (dan karenanya pilih: tidak valid).

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>

Berdasarkan respons Albireo , versi ini tidak menggunakan jQuery dan spesifisitas CSS lebih baik.

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>