Ubah warna placeholder input HTML5 dengan CSS

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

Tetapi yang berikut CSSini tidak melakukan apa pun terhadap nilai placeholder:

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

<input type="text" placeholder="Value">

Valueakan tetap greysebagai gantinya red.

Apakah ada cara untuk mengubah warna teks placeholder?

Penerapan

Ada tiga implementasi yang berbeda: elemen pseudo, kelas pseudo, dan tidak ada.

• WebKit, Blink (Safari, Google Chrome, Opera 15 +) dan Microsoft Edge menggunakan pseudo-elemen: ::-webkit-input-placeholder. ^{[ Ref ]}
• Mozilla Firefox 4 hingga 18 menggunakan pseudo-class: :-moz-placeholder( satu titik dua). ^{[ Ref ]}
• Mozilla Firefox 19+ menggunakan pseudo-element:, ::-moz-placeholdertetapi pemilih lama akan tetap 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 semu sederhana ::placeholder ^{[ Ref ]}

Internet Explorer 9 dan lebih rendah tidak mendukung placeholderatribut sama sekali, sedangkan Opera 12 dan lebih rendah tidak mendukung pemilih CSS untuk placeholder.

Diskusi tentang implementasi terbaik masih berlangsung. Perhatikan elemen pseudo bertindak seperti elemen nyata di Shadow DOM . A paddingpada sebuah inputtidak akan mendapatkan warna latar belakang yang sama dengan pseudo-element.

Penyeleksi CSS

Agen pengguna harus mengabaikan aturan dengan pemilih yang tidak dikenal. Lihat Selectors Level 3 :

Sebuah kelompok penyeleksi mengandung pemilih tidak valid tidak valid.

Jadi kita membutuhkan aturan terpisah untuk setiap browser. Kalau 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 menjadi default dengan opacity berkurang, jadi perlu digunakanopacity: 1 sini.
• Perhatikan bahwa teks placeholder hanya terpotong jika tidak sesuai - ukuran elemen input Anda emdan mengujinya dengan pengaturan ukuran font minimum yang besar. Jangan lupa terjemahan: beberapa bahasa membutuhkan 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 inputtipe ( email, search). Ini mungkin memengaruhi rendering dengan cara yang tidak terduga. Gunakan properti -webkit-appearance dan -moz-appearanceuntuk mengubahnya. Contoh:

    [type="search"] {
        -moz-appearance:    textfield;
        -webkit-appearance: textfield;
        appearance: textfield;
    }

/* 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 memberi gaya pada semua inputdan textareapenampung.

Catatan Penting: Jangan kelompokkan aturan ini. Alih-alih, buat aturan terpisah untuk setiap pemilih (satu pemilih yang tidak valid dalam grup membuat seluruh grup menjadi tidak valid).

Anda mungkin juga ingin menata textareas:

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

Untuk pengguna Bootstrap dan Less , ada mixin .placeholder:

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

Selain jawaban toscho saya perhatikan beberapa ketidakkonsistenan webkit antara Chrome 9-10 dan Safari 5 dengan properti CSS yang didukung yang patut dicatat.

Secara khusus Chrome 9 dan 10 tidak mendukung background-color, border, text-decorationdan text-transformketika styling placeholder.

Perbandingan lintas-browser lengkap ada di sini .

Untuk pengguna Sass :

// 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);
}

Ini akan bekerja 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" />

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

::-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; 
}

Solusi lintas-browser:

/* 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

Gunakan yang baru ::placeholderjika Anda menggunakan autoprefixer .

Perhatikan bahwa .placeholder mixin dari Bootstrap sudah tidak digunakan lagi.

Contoh:

input::placeholder { color: black; }

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

Sekarang kita memiliki cara standar untuk menerapkan CSS ke placeholder input: ::placeholderpseudo-element dari Draft Modul Level 4 CSS ini .

Saya baru menyadari sesuatu untuk Mozilla Firefox 19+ bahwa browser memberikan nilai opacity untuk placeholder, jadi warnanya tidak akan seperti yang Anda inginkan.

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
    color: #eee; opacity:1;
}
input:-moz-placeholder, textarea:-moz-placeholder {
    color: #eee; opacity:1;
}
input::-moz-placeholder, textarea::-moz-placeholder {
    color: #eee; opacity:1;
}
input:-ms-input-placeholder, textarea:-ms-input-placeholder {
    color: #eee; opacity:1;
}

Saya menimpa opacityuntuk 1, jadi itu akan baik untuk pergi.

Saya tidak ingat di mana saya menemukan potongan kode ini di Internet (itu tidak ditulis oleh saya, tidak ingat di mana saya menemukannya, atau siapa yang menulisnya).

$('[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'));
        }
    }).blur();
    $('[placeholder]').parents('form').submit(function() {
        $(this).find('[placeholder]').each(function() {
            var input = $(this);
            if (input.val() == input.attr('placeholder')) {
                input.val('');
            }
        })
    });

Cukup muat kode JavaScript ini lalu edit placeholder Anda dengan CSS dengan memanggil aturan ini:

form .placeholder {
   color: #222;
   font-size: 25px;
   /* etc. */
}

Saya pikir kode ini akan berfungsi karena placeholder diperlukan hanya untuk teks jenis input. Jadi CSS satu baris ini akan cukup untuk kebutuhan Anda:

input[type="text"]::-webkit-input-placeholder {
    color: red;
}

Untuk pengguna Bootstrap , jika Anda menggunakan class="form-control", mungkin ada masalah kekhususan CSS. Anda harus mendapatkan prioritas yang lebih tinggi:

.form-control::-webkit-input-placeholder {
    color: red;
}
//.. and other browsers

Atau jika Anda menggunakan Less :

.form-control{
    .placeholder(red);
}

Jika Anda menggunakan Bootstrap dan tidak bisa menjalankannya, mungkin Anda melewatkan fakta bahwa Bootstrap sendiri menambahkan penyeleksi ini. Ini adalah Bootstrap v3.3 yang sedang kita bicarakan.

Jika Anda mencoba mengubah placeholder di dalam kelas CSS .form-control maka Anda harus menimpanya seperti ini:

.form-control::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #777;
}
.form-control:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color:    #777;
    opacity:  1;
}
.form-control::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:    #777;
    opacity:  1;
}
.form-control:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color:    #777;
}

Kode singkat dan bersih ini:

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

Bagaimana dengan ini

<input type="text" value="placeholder text" onfocus="this.style.color='#000'; 
    this.value='';" style="color: #f00;" />

Tidak ada CSS atau placeholder, tetapi Anda mendapatkan fungsionalitas yang sama.

Saya telah mencoba setiap kombinasi di sini untuk mengubah warna, pada platform seluler saya, dan akhirnya:

-webkit-text-fill-color: red;

yang berhasil.

Untuk pengguna SASS / SCSS menggunakan Bourbon , ia memiliki fungsi bawaan.

//main.scss
@import 'bourbon';

input {
  width: 300px;

  @include placeholder {
    color: red;
  }
}

Output CSS, Anda juga dapat mengambil bagian ini dan menempelkannya ke kode Anda.

//main.css

input {
  width: 300px;
}

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

coba kode ini untuk berbagai elemen masukan gaya yang berbeda

your css selector::-webkit-input-placeholder { /*for webkit */
    color:#909090;
    opacity:1;
}
 your css selector:-moz-placeholder { /*for mozilla */
    color:#909090;
    opacity:1;
}
 your css selector:-ms-input-placeholder { /*for for internet exprolar */ 
   color:#909090;
   opacity:1;
}

Contoh 1:

input[type="text"]::-webkit-input-placeholder { /*for webkit */
    color: red;
    opacity:1;
}
 input[type="text"]:-moz-placeholder { /*for mozilla */
    color: red;
    opacity:1;
}
 input[type="text"]:-ms-input-placeholder { /*for for internet exprolar */ 
   color: red;
   opacity:1;
}

contoh 2:

input[type="email"]::-webkit-input-placeholder { /*for webkit */
    color: gray;
    opacity:1;
}
 input[type="email"]:-moz-placeholder { /*for mozilla */
    color: gray;
    opacity:1;
}
 input[type="email"]:-ms-input-placeholder { /*for for internet exprolar */ 
   color: gray;
   }

Ini satu contoh lagi:

.form-control::-webkit-input-placeholder {
  color: red;
  width: 250px;
}
h1 {
  color: red;
}

<div class="col-sm-4">
  <input class="form-control" placeholder="Enter text here.." ng-model="Email" required/>
</div>

Menambahkan kemungkinan aktual yang sangat bagus dan sederhana: filter css !

Ini akan mengatur segalanya, termasuk placeholder.

Berikut ini akan mengatur kedua input pada palet yang sama, menggunakan filter rona untuk perubahan warna. Itu membuat sangat baik sekarang di browser (kecuali yaitu ...)

input {
  filter: sepia(100%) saturate(400%) grayscale(0) contrast(200%) hue-rotate(68deg) invert(18%);
}

<input placeholder="Hello world!" />
<input type="date" /><br>
<input type="range" />
<input type="color" />

Untuk memungkinkan pengguna mengubahnya secara dinamis, menggunakan warna jenis input untuk perubahan, atau untuk menemukan nuansa, lihat cuplikan ini:

Dari: https://codepen.io/Nico_KraZhtest/pen/bWExEB

function stylElem() {
  stylo.dataset.hue = ((parseInt(stylo.value.substring(1), 16))/46666).toFixed(0)
  Array.from(document.querySelectorAll('input, audio, video')).forEach(function(e){
      e.style.cssText += ";filter:sepia(100%) saturate(400%)grayscale(0)contrast(200%)hue-rotate("+ stylo.dataset.hue+"deg)invert("+(stylo.dataset.hue/3.6)+"%)"
  out.innerText = e.style.cssText
})()}

stylElem()

<div id="out"></div> <p>
  <input placeholder="Hello world!" />
  <input type="date" /><br>
  <input type="range" />
  <input type="color" />
Colors (change me)-> 
<input type="color" id="stylo" oninput="stylElem()" /> <br><br>
<audio controls src="#"></audio> <br><br> 
<video controls src="#"></video>

Css memfilter dokumen: https://developer.mozilla.org/en-US/docs/Web/CSS/filter

OK, placeholder berperilaku berbeda di browser yang berbeda, jadi Anda perlu menggunakan awalan peramban di CSS Anda untuk menjadikannya identik, misalnya Firefox memberikan transparansi kepada placeholder secara default, jadi perlu menambahkan opacity 1 ke css Anda, ditambah warnanya, bukan perhatian besar sebagian besar kali, tetapi bagus untuk membuat mereka konsisten:

*::-webkit-input-placeholder { /* WebKit browsers */
    color:    #ccc;
}
*:-moz-placeholder { /* Mozilla Firefox <18 */
    color:    #ccc;
    opacity:  1;
}
*::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:    #ccc;
    opacity:  1;
}
*:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color:    #ccc;
}

Anda dapat mengubah warna placeholder input HTML5 dengan CSS. Jika kebetulan, konflik CSS Anda, catatan kode ini berfungsi, Anda dapat menggunakan (! Penting) seperti di bawah ini.

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:#909 !important;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:#909 !important;
   opacity:1 !important;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:#909 !important;
   opacity:1 !important;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:#909 !important;
}
::-ms-input-placeholder { /* Microsoft Edge */
   color:#909 !important;
}

<input placeholder="Stack Snippets are awesome!">

Semoga ini bisa membantu.

Anda dapat menggunakan ini untuk gaya input dan fokus:

input::-webkit-input-placeholder  { color:#666;}
input:-moz-placeholder  { color:#666;}
input::-moz-placeholder { color:#666;}
input:-ms-input-placeholder  { color:#666;}
/* focus */
input:focus::-webkit-input-placeholder { color:#eee; }
input:focus:-moz-placeholder { color:#eee } /* FF 4-18 */
input:focus::-moz-placeholder { color:#eee } /* FF 19+ */
input:focus:-ms-input-placeholder { color:#eee } /* IE 10+ */

Cara termudah adalah:

#yourInput::placeholder {
    color: red;/*As an example*/
}
/* if that would not work, you can always try styling the attribute itself: */
#myInput[placeholder] {
    color: red;
}

Kompas memiliki mixin untuk ini di luar kotak.

Ambil contoh Anda:

<input type="text" placeholder="Value">

Dan di SCSS menggunakan kompas:

input[type='text'] {
  @include input-placeholder {
    color: #616161;
  }
}

Lihat dokumen untuk mixin placeholder input.

Berikut ini solusinya dengan pemilih CSS

::-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 { /* Microsoft Edge */
   color:    #909;
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    #909;
}

• WebKit, Blink (Safari, Google Chrome, Opera 15+) dan Microsoft Edge menggunakan elemen pseudo:
  :: - webkit-input-placeholder.
• Mozilla Firefox 4 hingga 18 menggunakan pseudo-class
  :: -moz-placeholder (satu titik dua).
  Mozilla Firefox 19+ menggunakan elemen pseudo:
  :: - moz-placeholder, tetapi pemilih lama akan tetap berfungsi untuk sementara waktu.
• Internet Explorer 10 dan 11 menggunakan pseudo-class
  :: -ms-input-placeholder.
• Internet Explorer 9 dan yang lebih rendah sama sekali tidak mendukung atribut placeholder, sementara Opera 12 dan yang lebih rendah tidak mendukung pemilih CSS untuk placeholder.

Bagian dari HTML:

 <form action="www.anything.com">
 <input type="text" name="name"
  placeholder="Enter sentence"/>
  </form>

Saya akan menunjukkan cara mengubah warna ekspresi 'Masukkan kalimat' dengan CSS:

  ::placeholder{
  color:blue;
   }