Tukar warna pemegang tempat input HTML menggunakan CSS-Soal Jawab Rangkaian PHP Cina

Artikel Topik pembelajaran Muat turun Soal Jawab Kamus Pengaturcaraan Permainan kemas kini terkini

简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

Tukar warna pemegang tempat input HTML menggunakan CSS

P粉068510991 2023-08-27 11:17:26

429

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; }

Nilai

akan kekal kelabu

Adakah terdapat cara untuk menukar warna teks pemegang tempat?

P粉068510991

membalas semua (2)

P粉6800875502023-08-28 10:14:21 Tingkat 2

/* 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; }

Ini akan menggayakan semuainput和textareapemegang tempat.

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

Suka+0

Tambah Balasan

P粉7656846022023-08-28 09:38:19 Tingkat 1

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(akolon).^[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 atributplaceholdersama sekali, manakalaOpera 12 dan lebih rendah tidak menyokongpemilih CSS untuk mana-mana ruang letak.

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

Pemilih CSS

Ejen pengguna perlu mengabaikan peraturan dengan pemilih yang tidak diketahui. LihatPemilih 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; }

Suka+0

Tambah Balasan