Pertanyaan Ubah warna placeholder masukan HTML5 dengan CSS


Chrome mendukung atribut placeholder di input[type=text] elemen (orang lain mungkin juga).

Tetapi berikut ini CSS tidak melakukan apa pun terhadap nilai placeholder:

input[placeholder], [placeholder], *[placeholder] {
    color: red !important;
}
<input type="text" placeholder="Value">

Value akan tetap ada grey dari pada red.

Apakah ada cara untuk mengubah warna teks placeholder?


3594
2018-04-09 20:36


asal


Jawaban:


Pelaksanaan

Ada tiga implementasi yang berbeda: pseudo-elements, pseudo-class, dan tidak ada.

  • WebKit, Blink (Safari, Google Chrome, Opera 15+) dan Microsoft Edge menggunakan elemen pseudo: ::-webkit-input-placeholder. [Ref]
  • Mozilla Firefox 4 hingga 18 menggunakan kelas pseudo: :-moz-placeholder (satu usus besar). [Ref]
  • Mozilla Firefox 19+ menggunakan elemen pseudo: ::-moz-placeholder, tetapi pemilih lama masih akan bekerja untuk sementara waktu. [Ref]
  • Internet Explorer 10 dan 11 menggunakan pseudo-class: :-ms-input-placeholder. [Ref]
  • April 2017: Sebagian besar browser modern mendukung elemen pseudo sederhana ::placeholder  [Ref]

Internet Explorer 9 dan yang lebih rendah tidak mendukung placeholder atribut sama sekali, sementara Opera 12 dan yang lebih rendah tidak mendukung setiap pemilih CSS untuk placeholder.

Diskusi tentang implementasi terbaik masih berlangsung. Perhatikan elemen pseudo-bertindak seperti elemen nyata dalam DOM bayangan. SEBUAH padding pada input tidak akan mendapatkan warna latar belakang yang sama dengan elemen pseudo.

Pemilih CSS

Agen pengguna diminta untuk mengabaikan aturan dengan pemilih yang tidak dikenal. Lihat Selektor Level 3:

Sebuah kelompok pemilih yang berisi pemilih tidak sah tidak valid.

Jadi kita perlu aturan terpisah untuk setiap browser. Jika tidak, seluruh grup akan diabaikan oleh semua browser.

::-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;
}
<input placeholder="Stack Snippets are awesome!">

Catatan penggunaan

  • Hati-hati untuk menghindari kontras yang buruk. Placeholder Firefox tampaknya default dengan opasitas yang dikurangi, sehingga perlu digunakan opacity: 1 sini.
  • Perhatikan bahwa teks placeholder hanya terpotong jika tidak cocok - ukuran elemen masukan Anda em dan mengujinya dengan pengaturan ukuran huruf minimum yang besar. Jangan lupa terjemahan: beberapa bahasa perlu lebih banyak ruang untuk kata yang sama.
  • Browser dengan dukungan HTML untuk placeholder tetapi tanpa dukungan CSS untuk itu (seperti Opera) harus diuji juga.
  • Beberapa browser menggunakan CSS default tambahan untuk beberapa input jenis (email, search). Ini mungkin mempengaruhi rendering dengan cara yang tidak terduga. Menggunakan properti  -webkit-appearance dan -moz-appearance untuk mengubahnya. Contoh:
    [type="search"] {
        -moz-appearance:    textfield;
        -webkit-appearance: textfield;
        appearance: textfield;
    }

4528
2018-06-06 08:47



/* 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;
}
<input placeholder="hello"/> <br />
<textarea placeholder="hello"></textarea>

Ini akan bergaya semua input dan textarea placeholder.

Catatan penting: Jangan gabungkan aturan ini. Sebaliknya, buat aturan terpisah untuk setiap pemilih (satu pemilih tidak valid dalam grup membuat seluruh grup tidak valid).


655
2018-02-09 16:44



Anda mungkin juga ingin memberi style textareas:

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

260
2017-09-14 12:52



Untuk Bootstrap dan Kurang pengguna, ada mixin .placeholder:

// Placeholder text
// -------------------------
.placeholder(@color: @placeholderText) {
  &:-moz-placeholder {
    color: @color;
  }
  &:-ms-input-placeholder {
    color: @color;
  }
  &::-webkit-input-placeholder {
    color: @color;
  }
}

96
2018-02-14 21:11



Selain jawaban toscho, saya telah melihat beberapa ketidakkonsistenan webkit antara Chrome 9-10 dan Safari 5 dengan properti CSS yang didukung yang patut diperhatikan.

Khususnya, Chrome 9 dan 10 tidak mendukung background-color, border, text-decoration dan text-transform saat menata tempat penampung.

Perbandingan lintas browser lengkap sini.


92
2018-04-14 02:28



Untuk Kelancangan pengguna:

// Create placeholder mixin
@mixin placeholder($color, $size:"") {
  &::-webkit-input-placeholder {
    color: $color;
    @if $size != "" {
      font-size: $size;
    }
  }
  &:-moz-placeholder {
    color: $color;
    @if $size != "" {
      font-size: $size;
    }
  }
  &::-moz-placeholder {
    color: $color;
    @if $size != "" {
      font-size: $size;
    }
  }
  &:-ms-input-placeholder {
    color: $color;
    @if $size != "" {
      font-size: $size;
    }
  }
}

// Use placeholder mixin (the size parameter is optional)
[placeholder] {
  @include placeholder(red, 10px);
}

68
2018-06-25 09:01



Ini akan berfungsi dengan baik. DEMO DI SINI:

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  color: #666;
}
input:-moz-placeholder,
textarea:-moz-placeholder {
  color: #666;
}
input::-moz-placeholder,
textarea::-moz-placeholder {
  color: #666;
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  color: #666;
}
<input type="text" placeholder="Value" />


51
2017-10-08 19:21



Di Firefox dan Internet Explorer, warna teks input normal mengesampingkan properti warna placeholder. Jadi, kita perlu

::-webkit-input-placeholder { 
    color: red; text-overflow: ellipsis; 
}
:-moz-placeholder { 
    color: #acacac !important; text-overflow: ellipsis; 
}
::-moz-placeholder { 
    color: #acacac !important; text-overflow: ellipsis; 
} /* For the future */
:-ms-input-placeholder { 
    color: #acacac !important; text-overflow: ellipsis; 
}

43



Solusi lintas peramban:

/* all elements */
::-webkit-input-placeholder { color:#f00; }
::-moz-placeholder { color:#f00; } /* firefox 19+ */
:-ms-input-placeholder { color:#f00; } /* ie */
input:-moz-placeholder { color:#f00; }

/* individual elements: webkit */
#field2::-webkit-input-placeholder { color:#00f; }
#field3::-webkit-input-placeholder { color:#090; background:lightgreen; text-transform:uppercase; }
#field4::-webkit-input-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; }

/* individual elements: mozilla */
#field2::-moz-placeholder { color:#00f; }
#field3::-moz-placeholder { color:#090; background:lightgreen; text-transform:uppercase; }
#field4::-moz-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; }

Kredit: David Walsh


37



Sekarang kami memiliki cara standar untuk menerapkan CSS ke placeholder input: ::placeholder elemen pseudo dari ini Modul CSS Level 4 Draft.


35



Gunakan yang baru ::placeholder jika kamu gunakan autoprefixer.

Perhatikan bahwa .placeholder mixin dari Bootstrap tidak lagi mendukung ini.

Contoh:

input::placeholder { color: black; }

Ketika menggunakan autoprefixer di atas akan dikonversi ke kode yang benar untuk semua browser.


35