Laksanakan pelbagai senario aplikasi CSS::pemilih unsur pseudo pemegang tempat

Untuk melaksanakan pelbagai senario aplikasi CSS::pemilih elemen pseudo pemegang tempat, contoh kod khusus diperlukan

Dalam pembangunan web, CSS ialah bahasa helaian gaya yang biasa digunakan untuk mengawal reka letak dan gaya halaman web. Pemilih unsur pseudo pemegang tempat :: ialah pemilih baharu dalam CSS3, yang digunakan untuk mengubah suai gaya ruang letak kotak input (termasuk kotak input teks, kotak input kata laluan, dsb.).

Yang berikut akan memperkenalkan anda kepada pelbagai senario aplikasi dan memberikan contoh kod yang sepadan.

1. Ubah suai warna pemegang tempat kotak input:

input::placeholder {
  color: red;
}

Dalam kod di atas, tukar warna teks pemegang tempat kotak input kepada merah.

2. Ubah suai saiz fon ruang letak kotak input:

input::placeholder {
  font-size: 16px;
}

Dalam kod di atas, tukar saiz fon ruang letak kotak input kepada 16 piksel.

3. Ubah suai gaya fon pemegang tempat kotak input:

input::placeholder {
  font-family: 'Arial', sans-serif;
  font-style: italic;
}

Dalam kod di atas, tukar gaya fon pemegang tempat kotak input kepada fon Arial dan paparkannya dalam huruf condong.

4. Ubah suai warna latar belakang ruang letak kotak input:

input::placeholder {
  background-color: yellow;
}

Dalam kod di atas, tukar warna latar belakang ruang letak kotak input kepada kuning.

5. Ubah suai ketelusan ruang letak kotak input:

input::placeholder {
  opacity: 0.5;
}

Dalam kod di atas, ubah suai ketelusan ruang letak kotak input kepada 0.5, iaitu keadaan separa telus.

6. Ubah suai penjajaran pemegang tempat kotak input:

input::placeholder {
  text-align: center;
}

Dalam kod di atas, jajarkan teks pemegang tempat pada kotak input di tengah.

7. Ubah suai gaya sempadan ruang letak kotak input:

input::placeholder {
  border: 1px solid red;
}

Dalam kod di atas, tambahkan sempadan merah pada ruang letak kotak input.

8. Ubah suai kesan animasi ruang letak kotak input:

input::placeholder {
  animation: placeholder 2s infinite;
}

@keyframes placeholder {
  0% { opacity: 1; }
  50% { opacity: 0.5; }
  100% { opacity: 1; }
}

Dalam kod di atas, tambahkan kesan animasi gelung tak terhingga 2 saat pada ruang letak kotak input supaya ketelusannya ialah 0.5 pada 50% .

Melalui contoh kod di atas, kita boleh melihat pelbagai senario aplikasi pemilih unsur pseudo ::tempat letak. Pembangun boleh menggunakan kod ini secara fleksibel untuk melaksanakan gaya ruang letak kotak input tersuai mengikut keperluan khusus.

Perlu diambil perhatian bahawa memandangkan penyemak imbas yang berbeza mempunyai tahap sokongan yang berbeza untuk pemilih unsur pseudo ::pemegang tempat, jika anda ingin memastikan gaya boleh dipaparkan secara normal pada semua penyemak imbas arus perdana, adalah disyorkan untuk menambah awalan penyemak imbas kepada kod, seperti :

input::-webkit-input-placeholder {
  /* Safari, Chrome, and Opera */
  color: red;
}

input::-moz-placeholder {
  /* Firefox 19+ */
  color: red;
}

input::-ms-input-placeholder {
  /* IE 10+ */
  color: red;
}

input::-moz-placeholder {
  /* Firefox 18- */
  color: red;
}

Ini memastikan ia boleh dipaparkan dengan betul pada pelayar yang berbeza.

Saya harap pelbagai senario aplikasi CSS ::pemilih unsur pseudo pemegang tempat yang diperkenalkan dalam artikel ini boleh membantu anda. Jika anda mempunyai sebarang pertanyaan, sila tinggalkan mesej untuk perbincangan.

Atas ialah kandungan terperinci Laksanakan pelbagai senario aplikasi CSS::pemilih unsur pseudo pemegang tempat. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!