Bagaimana cara membuat placeholder untuk kotak 'pilih'?


1542

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

1
Kalau-kalau ada orang yang membaca ini - saya memposting solusi yang lebih umum untuk browser modern dengan validasi bawaan browser. Selamat datang di tahun 2020;)
Jurik

Jawaban:


2974

Jawaban non-CSS - tanpa JavaScript / jQuery:

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


134
Firefox (10) tidak menunjukkan opsi yang dinonaktifkan sebagai pilihan default (placeholder). Ini menunjukkan yang berikutnya secara default, dalam hal ini "Durr".
jarnoan

53
Saya biasanya menambahkan keduanya dinonaktifkan dan dipilih. Tampaknya bekerja di FF juga.
nilskp

11
<select> <option value="" disabled selected>Select your option</option> </select>
kolypto

183
Alasan ini bukan jawaban yang benar adalah karena (saya percaya) si penanya ingin pilih menjadi abu-abu sampai nilai lain telah dipilih. Jawaban ini membuat opsi abu-abu di drop down; tapi bukan elemen pilih.
Bill

22
pilih {opsi [dinonaktifkan] {tampilan: tidak ada; }}
Dimael Vertigo

822

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:

Pilih kotak Mac asli di Chrome

Menggunakan elemen batas yang diubah Mac di Chrome:

Kotak pilih diubah Mac di Chrome


5
@jaacob Pada browser yang saya uji, gaya 'display: none' menyembunyikan "Silakan pilih" dari daftar yang hanya membuatnya terlihat lebih bagus.
William Isted

38
Penting untuk dicatat bahwa opsi yang dinonaktifkan tidak dapat dipilih kembali: jika pilih wajib, ini ok - tetapi tidak jika pilih adalah opsional.
Robert Mark Bram

2
Explorer11 mengabaikan display:nonegaya.
T30

1
Kudos to @MattW untuk berolahraga :invalidjauh sebelum saya melakukannya.
William Isted

3
Anda juga bisa menambahkan aturan untuk "mengatur ulang" coloropsi di browser pendukung seperti pada biola ini . Ini akan membantu memperkuat bahwa yang disbled optionadalah pengganti. (Sunting: Saya melihat MattW sudah membahas hal ini dalam jawabannya)
Shaggy

251

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>


7
Luar biasa - itu adalah jawaban di bagian bawah (tanpa upvotes) yang paling sederhana, dan benar-benar berfungsi dengan sempurna. Terima kasih! Semoga jawaban ini akan naik ke puncak.
Dan Nissenbaum

2
@DanNissenbaum Saya sangat terlambat ke permainan, ditambah itu tidak perlu requiredbekerja sehingga tidak ada gunanya jika Anda ingin lapangan menjadi opsional.
MattW

1
Selain itu, :requiredpemilih tidak didukung di IE8 dan di bawah. The :invalidpemilih tidak didukung di IE9 dan bawah. quirksmode.org/css/selectors
Matt Wagner

4
Tidak ada solusi untuk pemilihan yang tidak diperlukan?
user3494047

1
@ user3494047 tidak dengan pendekatan ini - requiredkondisi inilah yang menyebabkan browser menerapkan :invalidpseudo-class ketika placeholder dipilih. [value=""]tidak akan berfungsi sebagai pengganti karena yang diperbarui oleh interaksi pengguna adalah properti nilai tetapi sintaks CSS merujuk pada atribut (tidak ada) .
MattW

105

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/


8
inilah yang saya lakukan baru-baru ini. tapi saya menambahkan keyup handler sehingga perubahan juga terjadi ketika opsi dipilih melalui keyboard (menggunakan panah atau cara pintas huruf) jsfiddle.net/Zmf6t/131
Radu

ini menempatkan saya di jalur yang benar ... namun saya membuat nilai = "" (tidak ada di antara tanda kutip) sehingga ketika tombol kirim diklik, masih gagal untuk memvalidasi opsi pertama dan popup browser akan muncul memberitahu Anda untuk memilih opsi ... terima kasih @Albireo
Craig Wayne

Mengapa Anda memanggil fungsi perubahan secara eksplisit.
Foreever

@Foreever karena saya mengatur kelas CSS di event handler perubahan pilih, jadi jika Anda tidak secara manual meningkatkan acara ketika kontrol dibangun gaya tidak diterapkan (itu akan diterapkan hanya ketika pengguna secara manual mengubah nilai).
Albireo

Ini tidak berfungsi pada JQeury 3.4.1
geobudex

45

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>


2
Sebagai catatan, ini tidak berfungsi untuk saya (Chrome on Win10).
Chris Rae

Tetapi Anda tidak dapat membatalkannya. Anda akhirnya memilih satu tetapi Anda tidak dapat mengatur ulang jika Anda berubah pikiran.
Thielicious

Ya! Namun di dalam formulir itu pula pengguna harus memilih salah satu dari opsi itu. Jika itu bukan bidang wajib hilangkan atribut tersembunyi itu.
Ajithkumar S

35

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>


26

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


2
Di beberapa browser ia masih dapat memilih tampilan: tidak ada opsi, karena tidak disembunyikan.
Srneczek

Pekerjaan untuk ini adalah menambahkan kelas "place_holder" lagi dalam kasus opsi pertama dipilih :)
rramiii

23

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.


Ini tidak berfungsi jika opsi tersembunyi adalah satu-satunya
Eridanis

tetapi mengapa Anda memiliki menu drop down dengan hanya satu opsi?
Jacob Schneider

Saya memiliki pop-up tab dan menu drop down dari tab3 mengambil input dari tab2, yang ditampilkan. Jawaban Anda baik dan ini adalah kasus sudut, tapi saya akan mengharapkan nilai default muncul sebagai opsi pertama, sebagai gantinya Anda mendapatkan drop down kosong. Lihat di sini: jsfiddle.net/n66L7sza
Eridanis

Itu adalah poin yang baik, dalam hal ini Anda dapat memindai panjang dropdown, jika nol, lalu hapus atribut tersembunyi
Jacob Schneider

Ini tampaknya tidak berfungsi dengan benar di Google Chrome 65.0.3325.181 pada MacOS, itu tidak menunjukkan entri yang tersembunyi dan memilih yang di bawahnya.
Jamie H

19

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>


2
atau select:invalidjuga valid.
elquimista

2
Saya merekomendasikan yang ini karena tidak menampilkan teks placeholder di antara daftar, setidaknya di Chrome.
JoeRaid

Perhatikan bahwa gaya tidak berfungsi tanparequired
akmalhakimi1991

18

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>


Terima kasih atas pembaruannya, tetapi jawabannya masih tidak menjelaskan mengapa tampilannya berbeda. Misalnya, jawaban ini mencegah opsi "Pilih opsi Anda" dari memilih ulang setelah opsi "Durr" dipilih. Atribut mana yang menyebabkan perilaku ini?
bgran

16

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>


Anda bisa menambahkan <option value="" selected disabled>Please select</option>sebagai opsi pertama.
sstauross

Itu tidak membuat placeholder berwarna abu-abu.
Chloe

12

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>


8
Durrberwarna abu-abu setelah Anda memilihnya. Ini memaksa kotak pilih yang tertutup menjadi abu-abu selalu.
Chloe

9

Jika Anda menggunakan Angular, lakukan seperti ini:

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


Anda bisa menambahkan hiddenatribut sehingga opsi tidak ditampilkan saat membuka menu select. Tetapi terima kasih dengan cara apa pun atas jawaban itu, itu berhasil untuk saya.
dcg

5

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


Tampaknya tidak berfungsi di JQuery 3.4.1
geobudex

5

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


4

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

3

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>


3

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.


3

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>


3

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>


Terima kasih, ini yang terbaik untuk saya, seperti yang Anda katakan ... elemen pilih diperlukan.
Mousa Alfhaily

3

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


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 .


2

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
}

1

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>

Hal ini menyebabkan seluruh elemen pilih menjadi abu-abu sampai opsi dipilih, sehingga menyebabkan perilaku yang mungkin tidak diinginkan.
wickedchild

1

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

1

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.


1

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.


1

Coba ini untuk perubahan:

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

1

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>

1

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>


0

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>

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.