: placeholder-ditampilkan - Trik CSS

Anonim

The :placeholder-shownpseudo-class memilih elemen input sendiri ketika placeholder teks ada dalam form input. Anggap saja sebagai cara yang bagus untuk membedakan antara input yang saat ini menampilkan teks placeholder versus yang tidak.

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

Ide di balik placeholder

Berbasis teks dan masukan dapat memiliki teks placeholder. Ini teks yang ditampilkan saat input kosong, untuk menyarankan nilai yang mungkin. Misalnya, formulir yang menanyakan sekolah mungkin memiliki label untuk apa yang diminta, tetapi kemudian menyarankan "Sekolah Menengah Contoh Bukit Hutan" di placeholder sebagai contoh nilai:

School Name:

Perbedaan antara :placeholder-showndan::placeholder

:placeholder-shownadalah untuk memilih input itu sendiri ketika teks placeholder itu ditampilkan. Berbeda dengan ::placeholdergaya teks placeholder yang mana.

Berikut diagramnya:

Saya menemukan ini sangat membingungkan karena:

  1. spesifikasi hanya ada :placeholder-showndan tidak::placeholder
  2. :placeholder-shown masih dapat mempengaruhi gaya teks placeholder, karena itu adalah elemen induk (misalnya ukuran font).

Perhatikan bahwa itu :placeholder-shownadalah pseudo- class (ini adalah elemen dalam status tertentu) dan ::placeholdermerupakan elemen pseudo (hal yang terlihat yang sebenarnya tidak ada di DOM). Dapat dibedakan dengan titik dua tunggal versus ganda.

Tab Atkins membereskannya untuk saya melalui email:

:placeholder-shown, sebagai pseudo-class, harus memilih elemen yang ada. Ini memilih input setiap kali Anda berada dalam keadaan menampilkan placeholder. The ::placeholderpseudo-elemen membungkus teks placeholder yang sebenarnya.

Jika Anda perlu memberi gaya pada teks placeholder

Gunakan ::placeholder (sebenarnya, gunakan semua awalan vendor gila untuk itu) yang telah kami jelaskan di Almanak di sini.

Informasi Lebih Lanjut

  • Selektor Level 4 Spec

Dukungan Browser

Data dukungan browser ini berasal dari Caniuse, yang lebih detail. Angka menunjukkan bahwa browser mendukung fitur pada versi tersebut dan yang lebih baru.

Desktop

Chrome Firefox YAITU Tepi Safari
47 51 11 * 79 9

Ponsel / Tablet

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