Pertanyaan Bagaimana cara saya membuat placeholder untuk kotak 'select'?


Saya menggunakan placeholder untuk input teks yang bekerja 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>

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

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

option:first {
    color: #999;
}

Edit: Pertanyaannya adalah: bagaimana orang membuat placeholder di kotak pilih? Tapi sudah dijawab, sorak-sorai.

Dan menggunakan hasil ini dalam nilai yang dipilih selalu berwarna abu-abu (bahkan setelah memilih opsi nyata):

select {
    color:#999;
}

1130
2018-04-27 13:39


asal


Jawaban:


Bagaimana dengan jawaban non CSS - no javascript / jQuery?

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


2330
2018-05-02 15:45



Hanya menemukan pertanyaan ini, inilah yang bekerja di FireFox & 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>

Opsi Nonaktif akan menghentikan <option> dipilih dengan mouse dan keyboard, sedangkan hanya menggunakan 'display:none' memungkinkan pengguna untuk tetap memilih melalui panah keyboard. Itu 'display:none' gaya hanya membuat kotak daftar terlihat 'bagus'.

Catatan: Menggunakan kosong value atribut pada opsi "placeholder" memungkinkan validasi (atribut yang diperlukan) untuk bekerja di sekitar memiliki "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 peramban 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)
  • Proyek Spartan - v.15.10130 (Placeholder terlihat dalam dropdown tetapi tidak dapat dipilih)

Pembaruan (Oktober 2015):

Dihapus style="display: none" mendukung atribut HTML5 hidden yang memiliki dukungan luas. Itu hidden elemen memiliki ciri yang sama seperti display: none di Safari, IE, (Proyek Spartan perlu memeriksa) di mana option terlihat dalam tarik-turun tetapi tidak dapat dipilih.

Pembaruan (Januari 2016):

Ketika select elemen adalah required itu memungkinkan penggunaan :invalid CSS pseudo-class yang memungkinkan Anda untuk mengatur style select elemen ketika di dalamnya "placeholder" negara. :invalid berfungsi di sini karena nilai kosong di placeholder option.

Setelah nilai telah ditetapkan :invalid kelas pseudo akan dijatuhkan. Anda juga dapat menggunakan opsi ini :valid jika Anda menginginkannya.

Sebagian besar browser mendukung kelas pseudo ini. IE10 +. Ini berfungsi paling baik dengan gaya custom select elemen; Dalam beberapa kasus yaitu (Mac di Chrome / Safari) Anda harus mengubah tampilan default dari select kotak sehingga tampilan gaya tertentu i.e. background-color, color. Anda dapat menemukan beberapa contoh dan lebih banyak tentang kompatibilitas di developer.mozilla.org.

Penampilan elemen native Mac di Chrome:

Select box native Mac in Chrome

Menggunakan elemen perbatasan yang diubah Mac di Chrome:

Altered select box Mac in Chrome


621
2017-12-09 08:22



Untuk bidang yang wajib diisi, ada solusi CSS murni di peramban 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>


178
2018-04-22 18:30



Sesuatu seperti ini mungkin?

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/


92
2018-04-27 13:50



Saya baru saja menambahkan atribut tersembunyi di opsi seperti di bawah ini, Ini berfungsi dengan baik untuk saya.

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


35
2018-06-30 10:42



Solusi itu bekerja di FireFox juga:
Tanpa JS.

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


22
2018-02-12 08:24



Saya memiliki masalah yang sama dan ketika mencari menemukan pertanyaan ini, dan setelah saya menemukan solusi yang baik untuk saya, saya ingin berbagi dengan kalian jika ada orang yang dapat mengambil manfaat darinya. 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;
}

JS:

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

Setelah pelanggan memilih pertama tidak perlu warna abu-abu sehingga JS menghapus kelas place_holder. Saya harap ini membantu seseorang :)

Memperbarui: Terima kasih kepada @ user1096901, sebagai browser IE, Anda dapat menambahkan place_holder kelas lagi jika opsi pertama dipilih lagi :)


19
2017-08-11 05:00



ini milikku

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

</select>


12
2017-11-15 06:00



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>


11
2018-04-10 16:50