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;
}
html
css
html-select
placeholder
Thomas
sumber
sumber
Jawaban:
Jawaban non-CSS - tanpa JavaScript / jQuery:
sumber
<select> <option value="" disabled selected>Select your option</option> </select>
Saya baru saja menemukan pertanyaan ini, dan inilah yang berfungsi di Firefox dan Chrome (setidaknya):
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
value
atribut 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:
Pembaruan (Oktober 2015):
Saya menghapus
style="display: none"
mendukung atribut HTML5hidden
yang memiliki dukungan luas. Thehidden
elemen memiliki ciri-ciri yang sama sepertidisplay: none
di Safari, Internet Explorer, (Project Spartan perlu memeriksa) di manaoption
terlihat dalam dropdown, tetapi tidak dipilih.Pembaruan (Januari 2016):
Ketika
select
elemenrequired
itu memungkinkan penggunaan:invalid
pseudo-class CSS yang memungkinkan Anda untuk gayaselect
elemen ketika dalam keadaan "placeholder".:invalid
berfungsi di sini karena nilai kosong di placeholderoption
.Setelah nilai ditetapkan,
:invalid
pseudo-class akan dijatuhkan. Anda juga dapat menggunakan:valid
jika Anda menginginkannya.Sebagian besar browser mendukung kelas semu ini. Internet Explorer 10 dan yang lebih baru. Ini bekerja paling baik dengan
select
elemen gaya khusus ; dalam beberapa kasus yaitu (Mac di Chrome / Safari) Anda harus mengubah tampilan defaultselect
kotak sehingga gaya tertentu ditampilkan, yaitu,background-color
dancolor
. 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:
sumber
display:none
gaya.:invalid
jauh sebelum saya melakukannya.color
opsi di browser pendukung seperti pada biola ini . Ini akan membantu memperkuat bahwa yang disbledoption
adalah pengganti. (Sunting: Saya melihat MattW sudah membahas hal ini dalam jawabannya)Untuk bidang yang wajib diisi, ada solusi murni-CSS di browser modern:
sumber
required
bekerja sehingga tidak ada gunanya jika Anda ingin lapangan menjadi opsional.:required
pemilih tidak didukung di IE8 dan di bawah. The:invalid
pemilih tidak didukung di IE9 dan bawah. quirksmode.org/css/selectorsrequired
kondisi inilah yang menyebabkan browser menerapkan:invalid
pseudo-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) .Sesuatu seperti ini:
HTML:
CSS:
JavaScript:
Contoh kerja: http://jsfiddle.net/Zmf6t/
sumber
Saya baru saja menambahkan atribut tersembunyi dalam
option
seperti di bawah ini. Ini bekerja dengan baik untuk saya.sumber
Solusi di bawah juga berfungsi di Firefox, tanpa JavaScript apa pun:
sumber
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:
CSS:
JavaScript:
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_holder
kelas lagi jika opsi pertama dipilih lagi :)sumber
Tidak ada kebutuhan untuk JavaScript atau CSS, hanya tiga atribut:
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:
Jelas, Anda dapat memisahkan fungsi dan setidaknya CSS pilihan ke dalam file terpisah.
Catatan: fungsi onload memperbaiki bug penyegaran.
sumber
Pengguna seharusnya tidak melihat pengganti di opsi yang dipilih. Saya sarankan untuk menggunakan
hidden
atribut untuk opsi placeholder, dan Anda tidak perluselected
atribut untuk opsi ini. Anda bisa memasukkannya sebagai yang pertama.sumber
select:invalid
juga valid.required
Di sini saya telah memodifikasi jawaban David (jawaban yang diterima). Pada jawabannya, dia meletakkan atribut yang dinonaktifkan dan dipilih pada
option
tag, tetapi ketika kita juga menaruh tag tersembunyi maka itu akan terlihat jauh lebih baik.Dengan menambahkan atribut tersembunyi tambahan pada
option
tag, itu akan mencegah opsi "Pilih opsi Anda" dari memilih ulang setelah opsi "Durr" dipilih.sumber
Ini milik saya:
sumber
<option value="" selected disabled>Please select</option>
sebagai opsi pertama.Saya melihat tanda-tanda jawaban yang benar, tetapi untuk menyatukan semuanya, ini akan menjadi solusi saya:
sumber
Durr
berwarna abu-abu setelah Anda memilihnya. Ini memaksa kotak pilih yang tertutup menjadi abu-abu selalu.Jika Anda menggunakan Angular, lakukan seperti ini:
sumber
hidden
atribut sehingga opsi tidak ditampilkan saat membuka menuselect
. Tetapi terima kasih dengan cara apa pun atas jawaban itu, itu berhasil untuk saya.HTML + CSS
Solusi ini bekerja untuk saya:Semoga berhasil...
sumber
Kemungkinan lain dalam JavaScript:
JSFiddle
sumber
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-select
dan 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-select
menangani placeholder dalam menyeleksi melalui sistem kompleks dari berbagaiinputs
danhtml
elemen.Di Bereaksi, untuk komponen yang dikendalikan , Anda tidak bisa menambahkan
selected
atribut ke opsi Anda. Bereaksi menangani keadaan pemilihan melaluivalue
atribut padaselect
dirinya sendiri, bersama dengan penangan perubahan, di mana nilai harus cocok dengan salah satu atribut nilai dalam opsi itu sendiri.Seperti misalnya
Karena itu akan tidak tepat dan pada kenyataannya akan membuat kesalahan untuk menambahkan
selected
atribut ke salah satu opsi, lalu bagaimana?Jawabannya sederhana setelah Anda memikirkannya. Karena kita ingin kami pertama
option
menjadiselected
sertadisabled
danhidden
, kita perlu melakukan tiga hal:hidden
dandisabled
atribut ke yang didefinisikan pertamaoption
.option
menjadi string kosong.select
juga string kosong.Sekarang Anda dapat mengatur gaya pilih seperti yang ditunjukkan di atas (atau melalui
className
jika Anda suka).sumber
Input
[type="text"]
Style Placeholder untuk Elemen PilihSolusi berikut mensimulasikan placeholder yang terkait dengan
input[type="text"]
elemen:sumber
Saya ingin SELECT menjadi abu-abu sampai terpilih jadi untuk bagian HTML ini:
Saya telah menambahkan definisi CSS ini:
Ini berfungsi seperti yang diharapkan di Chrome / Safari dan mungkin juga di browser lain, tapi saya belum memeriksanya.
sumber
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)
sumber
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:
sumber
Saya tidak puas dengan solusi khusus HTML / CSS, jadi saya memutuskan untuk membuat custom
select
menggunakan 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
input
untuk menyimpan nilai yang dipilih, sehingga bisa digunakan dalam formulir.Memasukkan:
Keluaran:
Teks item yang seharusnya menjadi pengganti adalah abu-abu. Pengganti dapat dipilih, jika pengguna ingin mengembalikan pilihannya. Juga menggunakan CSS, semua kelemahan
select
dapat diatasi (misalnya, ketidakmampuan penataan opsi).Tampilkan cuplikan kode
Pembaruan : Saya telah memperbaiki ini (pilihan menggunakan tombol naik / turun / masuk), merapikan output sedikit, dan mengubahnya menjadi objek. Keluaran saat ini:
Inisialisasi:
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:
Keluaran:
JSFiddle , GitHub .
sumber
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
Javascript
sumber
sumber
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 * /
/ ** Komponen Saya.TS * /
/**global.scss*/
sumber
Solusi untuk Angular 2
Buat label di atas pilih
dan terapkan CSS untuk menempatkannya di atas
pointer-events: none
memungkinkan Anda untuk menampilkan pilih ketika Anda mengklik label, yang disembunyikan ketika Anda memilih opsi.bersudut html css
sumber
Inilah kontribusi saya. Haml + CoffeeScript + SCSS
Haml
CoffeeScript
SCSS
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.
Anda bisa menambahkan lebih banyak CSS (
select option:first-child
) untuk menjaga abu-abu placeholder ketika terbuka, tapi saya tidak peduli tentang itu.sumber
Coba ini untuk perubahan:
sumber
Berikut ini adalah contoh kerja bagaimana mencapainya dengan JavaScript murni yang menangani warna opsi setelah klik pertama:
sumber
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).
sumber
Berdasarkan respons Albireo , versi ini tidak menggunakan jQuery dan spesifisitas CSS lebih baik.
sumber