Pengubahsuaian warna pemegang tempat input HTML5 example_html5 kemahiran tutorial

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() {

var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val(''); >input.removeClass( 'placeholder');
}
}).blur(function() {
var input = $(this);
if (input.val() == ' ' ||. input. val() == input.attr('placeholder')) {
input.addClass('placeholder'
input.val(input.attr('placeholder')); 🎜>}
}).kabur();
$('[pemegang tempat]').ibu bapa('borang').serahkan(fungsi() {
$(ini).cari('[ pemegang tempat]'). each(function() {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val ('');
}
})
});


Peraturan untuk memanggil kod ini adalah untuk memuatkan Javascript dahulu dan kemudian menggunakan CSS untuk mengubah suai atribut pemegang tempat.

Salin kod

Kod adalah seperti berikut: borang .tempat letak {

warna: #222;

saiz fon: 25px;

/* dsb */
}


pengguna1729061: Anda boleh mendapatkan kesan yang sama tanpa CSS dan teks pemegang tempat.

Salin kod

Kod adalah seperti berikut: input type="text" value=" textholder place" onfocus="this.style.color='#000';

this.value='';" style="color: #f00;"/>