Atoz CSS Petua Pantas: Teks Pemegang Sedang

Artikel ini adalah sebahagian daripada siri Atoz CSS. Anda boleh mencari entri lain untuk siri ini di sini. Anda boleh melihat teks penuh dan tangkapan skrin elemen pseudo video yang sepadan.

Selamat datang ke siri Atoz CSS kami! Dalam siri ini, saya akan meneroka pelbagai nilai CSS (dan sifat) yang bermula dengan huruf yang berbeza dalam abjad. Kami tahu bahawa kadang -kadang tangkapan skrin tidak mencukupi, jadi dalam artikel ini kami telah menambahkan tip baru pada teks pemegang tempat.

p bermaksud teks pemegang tempat

pseudo-elements

dan

sesuai untuk membina ciri-ciri reka bentuk kompleks tanpa mengacaukan markup dengan unsur-unsur bukan semantik. Elemen pseudo lain, seperti :before dan :after, membolehkan kita mengakses gaya unsur-unsur yang tidak bertanda dalam dokumen HTML. :first-line :first-letter kami melihat banyak perkara ini dalam tangkapan skrin pseudo-elemen, tetapi satu pseudo-elemen yang kita tidak lihat adalah gaya teks pemegang tempat. Mari selesaikan masalah ini.

Pilih input placeholder

Pertama, mari kita bayangkan html berikut:

kita boleh menetapkan warna teks input ke merah, seperti yang ditunjukkan di bawah:

<input class="name-field" type="text" placeholder="Enter your name">

kita juga boleh memilih dan menetapkan gaya input mengikut atribut tempatnya:

.name-field {
  color: red;
}

tetapi ini masih akan gaya apa -apa

input[placeholder="Enter your name"] {
  color: red;
}

input pengguna

teks yang ditaip dalam medan input, dan bukannya menetapkan penampilan teks pemegang tempat itu sendiri. Untuk melakukan ini, kami memerlukan satu siri pemilih awalan vendor untuk elemen pseudo-placeholder.

Ini kelihatan seperti pengulangan, tetapi malangnya tidak ada lagi ringkas (jangan ulangi diri anda) cara untuk melakukan ini.

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

Kaedah berikut tidak sah:

Ini kerana mana-mana pelayar mesti dapat "memahami" setiap pemilih dalam siri yang dipisahkan koma untuk menggunakan gaya di dalam pendakap.

::-webkit-input-placeholder,
:-moz-placeholder,
::-moz-placeholder,
:-ms-input-placeholder {
  color: red;  
}

Tetapkan Gaya Pemegang Sedang dengan Sass

Satu cara untuk menyelesaikan CSS duplikat ini ialah menggunakan makro SASS Hybrid. Inilah yang saya gunakan dalam 99% projek:

Ini membolehkan saya untuk menggayakan ruang letak dalam semua pelayar menggunakan satu SASS

@mixin input-placeholder {
  ::-webkit-input-placeholder {
    @content;
  }
  :-moz-placeholder {/* Firefox 18- */
    @content;
  }
  ::-moz-placeholder {/* Firefox 19+ */
    @content;
  }
  :-ms-input-placeholder {  
    @content;
  }
}

/* usage */

@include input-placeholder {
  color: red;
}

yang membantu menjadikan kod itu lebih pendek dan lebih mudah untuk dikekalkan.

@include Perhatikan kekhususan apabila menetapkan gaya letak

Dalam pelayar IE, menetapkan gaya yang dimasukkan boleh mengatasi gaya yang ditetapkan untuk teks pemegang tempat.

Pastikan gaya letak IE mempunyai kekhususan yang lebih tinggi supaya ia muncul seperti yang diharapkan. Ini mungkin menjadi kes menggunakan

:-ms-input-placeholder {
  color: red;
}
input[type="text"] { 
  color: blue; /* 占位符文本在 IE 中将为蓝色 */
}

, tetapi berhati -hati apabila menggunakan alat yang berkuasa ini.

Perhatikan kelegapan ruang letak

Di Firefox, kelegapan lalai teks pemegang tempat adalah kira -kira 0.5, jadi tetapan opacity: 1 pada pemegang tempat akan menyebabkan warna menjadi gelap kecuali anda juga menetapkan color: red.

Walaupun anda menggunakan normalisasi.css, item ini tidak akan ditetapkan semula untuk anda. Sekiranya ruang letak yang benar -benar lega adalah penting untuk projek anda, pastikan tip ini dalam fikiran!

Soalan Lazim Mengenai CSS Text Texteholder (FAQ)

Bagaimana menukar warna teks pemegang tempat dalam CSS?

Warna teks pemegang tempat dalam CSS boleh diubah dengan menggunakan pseudo-elemen ::placeholder. Pseudo-element ini membolehkan anda menggunakan teks placeholder gaya dalam elemen input atau teks. Berikut adalah contoh cara menukar warna menjadi merah:

<input class="name-field" type="text" placeholder="Enter your name">

ingat bahawa keserasian penyemak imbas adalah penting. Untuk Firefox, gunakan ::-moz-placeholder; :-ms-input-placeholder ::-webkit-input-placeholder Bolehkah saya menukar saiz fon teks pemegang tempat?

Ya, anda boleh menukar saiz fon teks pemegang tempat. Sama seperti menukar warna, anda boleh menggunakan pseudo-elemen

untuk menukar saiz fon. Berikut adalah contoh:

::placeholder

Ini mengubah saiz fon teks placeholder kepada 18px.

.name-field {
  color: red;
}

Adakah mungkin untuk menukar gaya fon teks placeholder?

Sudah tentu, anda boleh menukar gaya fon teks placeholder. Anda boleh membuatnya dalam huruf miring, berani, atau gaya lain yang anda mahukan. Berikut adalah contoh cara menjadikannya italic:

Ini mengubah gaya font teks pemegang tempat ke huruf miring.

input[placeholder="Enter your name"] {
  color: red;
}

Bolehkah saya mengubah kelegapan teks pemegang tempat?

Ya, anda boleh mengubah kelegapan teks pemegang tempat. Ini boleh dilakukan dengan menggunakan atribut

dalam CSS. Berikut adalah contoh:

opacity

ini mengubah kelegapan teks pemegang tempat menjadi 0.5, menjadikannya lut.

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

Bagaimana untuk menambah warna latar belakang ke teks placeholder?

Malangnya, anda tidak boleh menambah warna latar belakang kepada teks letak.

Pseudo-elements hanya membolehkan anda menetapkan warna, saiz fon, gaya fon, dan kelegapan teks placeholder. Ia tidak menyokong atribut lain seperti

. ::placeholder background-color Bolehkah saya menggunakan animasi CSS pada teks pemegang tempat?

Tidak, anda tidak boleh menggunakan animasi CSS pada teks placeholder.

Pseudo-unsur tidak menyokong animasi CSS atau peralihan.

::placeholder Adakah mungkin untuk menetapkan gaya letak yang berbeza dengan cara yang berbeza?

Ya, anda boleh menetapkan gaya pemegang tempat yang berbeza dengan cara yang berbeza. Anda hanya perlu menggunakan kelas atau ID yang berbeza untuk setiap elemen kawasan input atau teks. Berikut adalah contoh:

Ini akan menjadikan teks pemegang tempat dalam input dengan kelas "input1" merah, dan teks pemegang tempat dalam input dengan kelas "input2" biru.

::-webkit-input-placeholder,
:-moz-placeholder,
::-moz-placeholder,
:-ms-input-placeholder {
  color: red;  
}

Bolehkah saya menggunakan kelas pseudo dengan ::placeholder?

Tidak, anda tidak boleh menggunakan kelas pseudo seperti :hover, :active atau :focus dengan ::placeholder. ::placeholder Pseudo-elements tidak menyokong kelas pseudo.

Adakah mungkin untuk menukar teks tempat menggunakan CSS?

Tidak, anda tidak boleh menukar teks pemegang tempat menggunakan CSS. Kandungan teks pemegang tempat hanya boleh diubah menggunakan HTML.

Bolehkah saya menggunakan pertanyaan media dalam ::placeholder?

Ya, anda boleh menggunakan pertanyaan media dalam ::placeholder. Ini membolehkan anda gaya teks pemegang tempat dengan cara yang berbeza bergantung pada saiz skrin atau peranti. Berikut adalah contoh:

<input class="name-field" type="text" placeholder="Enter your name">

Ini mengubah warna teks pemegang tempat pada skrin dengan lebar skrin 600px atau lebih kecil ke merah.

Atas ialah kandungan terperinci Atoz CSS Petua Pantas: Teks Pemegang Sedang. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!