: tempat letak ditunjukkan - Trik CSS

Anonim

Kelas :placeholder-shownpseudo memilih elemen input itu sendiri apabila teks placeholder wujud dalam bentuk input. Anggaplah ia sebagai kaedah yang baik untuk membezakan antara input yang sedang menunjukkan teks placeholder berbanding yang tidak.

input:placeholder-shown ( border: 5px solid red; )

Idea di sebalik ruang letak

Berasaskan teks dan input boleh mempunyai teks placeholder. Teksnya ditunjukkan ketika input kosong, untuk menunjukkan kemungkinan nilai. Sebagai contoh, borang yang meminta sekolah mungkin mempunyai label untuk apa yang diminta, tetapi kemudian mencadangkan "Sekolah Tinggi Contoh Hutan Hutan" di tempat letak sebagai nilai contoh:

School Name:

Perbezaan antara :placeholder-showndan::placeholder

:placeholder-shownadalah untuk memilih input itu sendiri ketika teks placeholder sedang ditunjukkan. Berbanding dengan ::placeholdergaya mana teks tempat letak.

Berikut adalah rajah:

Saya rasa ini sangat membingungkan kerana:

  1. spesifikasi hanya ada :placeholder-showndan tidak::placeholder
  2. :placeholder-shown masih boleh mempengaruhi gaya teks placeholder, kerana ia adalah elemen induk (contohnya, saiz fon).

Perhatikan bahawa itu :placeholder-shownadalah kelas pseudo (itu adalah elemen dalam keadaan tertentu) dan ::placeholdermerupakan elemen pseudo (benda yang kelihatan yang sebenarnya tidak ada di DOM). Dibezakan dengan kolon satu lawan satu.

Tab Atkins membersihkannya melalui e-mel:

:placeholder-shown, sebagai kelas pseudo, harus memilih elemen yang ada. Ini memilih input setiap kali anda berada dalam keadaan penunjuk tempat. The ::placeholderpseudo-unsur Balutan teks pemegang tempat yang sebenar.

Sekiranya anda perlu menggayakan teks ruang letak

Gunakan ::placeholder (sebenarnya, gunakan semua awalan vendor gila untuknya) yang telah kami jelaskan dalam Almanac di sini.

Maklumat lanjut

  • Pemilih Tahap 4 Spesifikasi

Sokongan Penyemak Imbas

Data sokongan penyemak imbas ini berasal dari Caniuse, yang mempunyai lebih terperinci. Nombor menunjukkan bahawa penyemak imbas menyokong ciri pada versi dan ke atas.

Desktop

Chrome Firefox IE Hujung Safari
47 51 11 * 79 9

Mudah Alih / Tablet

Android Chrome Android Firefox Android Safari iOS
88 85 81 9.0-9.2