Pengubahsuaian warna pemegang tempat input HTML5 example_html5 kemahiran tutorial-Tutorial H5-php.cn

Pengubahsuaian warna pemegang tempat input HTML5 example_html5 kemahiran tutorial

WBOY

Lepaskan： 2016-05-16 15:47:51

asal

1463 orang telah melayarinya

Chrome menyokong input=[type=text] atribut teks pemegang tempat, tetapi gaya CSS berikut tidak berfungsi:

CSS

Salin kod

Kodnya adalah seperti berikut:

input[placeholder], [placeholder], *[placeholder] {
color:red !important; }

Pernyataan input HTML

Salin kodKod adalah seperti berikut:

Nilai hasil larian masih kelabu, Warna: merah tiada kesan. Adakah terdapat sebarang cara untuk menukar warna teks pemegang tempat? Saya memasang pemalam teks pemegang tempat jQuery dalam penyemak imbas saya, tetapi ia masih tidak berfungsi. (!penting hanya diiktiraf oleh IE7 dan firefox)

Jawapan:

toscho: Terdapat tiga kaedah pelaksanaan: pseudo-elements, pseudo-classes dan Notihing.
WebKit dan Blink (Safari, Google Chrome, Opera15) menggunakan elemen pseudo

Salin kodKod adalah sebagai berikut:

::-webkit-input-placeholder

Mozilla Firefox 4-18 menggunakan kelas pseudo

Salin kodKodnya adalah seperti berikut:

:-moz-placeholder

Mozilla Firefox 19 menggunakan unsur pseudo

Salin kodKodnya adalah seperti berikut:

::- moz-placeholder

IE10 menggunakan kelas pseudo

Salin kod Kod itu seperti berikut:

:-ms-input -placeholder

Pemilih CSS dalam versi di bawah IE9 dan Opera12 tidak menyokong teks pemegang tempat. Perlu diingatkan bahawa elemen pseudo akan memainkan peranan sebenar elemen dalam Shadow DOM.

Pemilih CSS

Oleh kerana pemilih CSS setiap penyemak imbas adalah berbeza, tetapan berasingan perlu dibuat untuk setiap penyemak imbas.

Salin kodKod tersebut adalah seperti berikut:

::-webkit-input -pemegang tempat { /* pelayar WebKit */
warna: #999;
}
:-moz-pemegang tempat { /* Mozilla Firefox 4 hingga 18 */
warna: #999> }
::-moz-placeholder { /* Mozilla Firefox 19 */
warna: #999;
}
:-ms-input-placeholder { /* Internet Explorer 10 */
warna: #999;
}

Mat: Kod untuk gaya textareas (kotak teks boleh diregangkan) adalah seperti berikut:

Salin kodKod tersebut adalah seperti berikut:

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {

warna: # 636363;
}
input:-moz-placeholder, textarea:-moz-placeholder {
warna: #636363;
}

cemerlang .com: input dan Warna fon Textarea semuanya berwarna merah. Semua gaya mestilah khusus untuk pemilih yang berbeza dan tidak boleh dibungkus secara keseluruhan, kerana jika salah satu daripadanya gagal, yang lain akan gagal.

Salin kodKod tersebut adalah seperti berikut:

*::-webkit- input-placeholder {

warna: merah;
}
*:-moz-placeholder {
warna: red;
}
*:-ms-input-placeholder {
/* IE10 */
warna: merah;
}

James Donnelly: Dalam Firefox dan IE, warna teks input biasa mengatasi warna pemegang tempat:

Salin kodKod tersebut adalah seperti berikut:

::-webkit-input-placeholder {

color: red ; text-overflow: elipsis;
}
:-moz-placeholder {
color: #acacac !important; text-overflow: elipsis; -pemegang tempat {
warna: #acacac !important; text-overflow:
} /* untuk masa hadapan */
:-ms-input-placeholder {
warna: #acacac !important ; teks- limpahan: elipsis;
Ada satu lagi cara yang baik:

Salin kod

Kodnya adalah seperti berikut:

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
color: #666;
}
input:-moz-placeholder, textarea:-moz -pemegang tempat {
warna: #666;
}
masukan::-moz-pemegang tempat, kawasan teks::-moz-pemegang tempat {
warna: #666; :-ms- input-placeholder, textarea:-ms-input-placeholder {
warna: #666;
}

Yang terakhir ditemui dalam talian:

Salin kodKodnya adalah seperti berikut:

$('[placeholder]').focus( function() {