Tukar warna pemegang tempat input HTML menggunakan CSS

Question

Chrome v4 menyokong atribut pemegang tempat pada elemen input[type=text]

Walau bagaimanapun, CSS berikut tidak melakukan apa-apa dengan nilai pemegang tempat:

input[placeholder], [placeholder], *[placeholder] {
    warna: merah !penting;
}

<input type="text" placeholder="Value">

Nilai

akan kekal kelabu

Adakah terdapat cara untuk menukar warna teks pemegang tempat?

Answer 1

/* do not group these rules */
*::-webkit-input-placeholder {
    color: red;
}
*:-moz-placeholder {
    /* FF 4-18 */
    color: red;
    opacity: 1;
}
*::-moz-placeholder {
    /* FF 19+ */
    color: red;
    opacity: 1;
}
*:-ms-input-placeholder {
    /* IE 10+ */
    color: red;
}
*::-ms-input-placeholder {
    /* Microsoft Edge */
    color: red;
}
*::placeholder {
    /* modern browser */
    color: red;
}

<input placeholder="hello"/> <br />
<textarea placeholder="hello"></textarea>

Ini akan menggayakan semua input和textarea ​​pemegang tempat.

Penting: Jangan kumpulkan peraturan ini. Sebaliknya, buat peraturan berasingan untuk setiap pemilih (pemilih yang tidak sah dalam kumpulan membatalkan keseluruhan kumpulan).

Answer 2

Pelaksanaan

Terdapat tiga pelaksanaan berbeza: unsur pseudo, kelas pseudo dan tiada.

• WebKit, Blink (Safari, Google Chrome, Opera 15+) dan Microsoft Edge menggunakan elemen pseudo: ::-webkit-input-placeholder. ^[rujukan]
• Mozilla Firefox 4 hingga 18 menggunakan kelas pseudo: :-moz-placeholder (a kolon). ^[rujukan]
• Mozilla Firefox 19+ menggunakan unsur pseudo: ::-moz-placeholder, tetapi pemilih lama masih akan berfungsi untuk seketika. ^[Rujukan]
• Internet Explorer 10 dan 11 menggunakan pseudo-class: :-ms-input-placeholder. ^[Rujukan]
• April 2017: Kebanyakan penyemak imbas moden menyokong elemen pseudo mudah ::placeholder ^[Ref]

Internet Explorer 9 dan lebih rendah tidak menyokong atribut placeholder sama sekali, manakala Opera 12 dan lebih rendah tidak menyokong pemilih CSS untuk mana-mana ruang letak.

Perbincangan tentang pilihan pelaksanaan terbaik diteruskan. Ambil perhatian bahawa elemen pseudo berkelakuan seperti elemen sebenar dalam shadow DOM. input 上的 padding tidak akan mendapat warna latar belakang yang sama dengan elemen pseudo.

Pemilih CSS

Ejen pengguna perlu mengabaikan peraturan dengan pemilih yang tidak diketahui. Lihat Pemilih Tahap 3:

Jadi kita perlu membuat peraturan berasingan untuk setiap penyemak imbas. Jika tidak, keseluruhan kumpulan akan diabaikan oleh semua pelayar.

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #909;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #909;
   opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #909;
   opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    #909;
}
::-ms-input-placeholder { /* Microsoft Edge */
   color:    #909;
}

::placeholder { /* Most modern browsers support this now. */
   color:    #909;
}

<input placeholder="Stack Snippets are awesome!">