Soru Bir HTML5 girişinin yer tutucu rengini CSS ile değiştirin


Chrome yer tutucu özniteliği üzerinde input[type=text] elemanlar (diğerleri muhtemelen de).

Ama aşağıdaki CSS sahibinin değerine hiçbir şey yapmaz:

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

Value hala kalacak grey yerine red.

Yer tutucu metnin rengini değiştirmenin bir yolu var mı?


3600
2018-04-09 20:36


Menşei


Hızlı başlangıç ​​(bir çözüm değil, sadece bir FYI): eğer doğru bir şekilde hatırlarsam, [yer tutucu] girin, bir yer tutucu özniteliği olan <input> etiketleriyle eşleşir, bu, yer tutucu özniteliğinin kendisiyle eşleşmez. - pinkgothic
Düşünce aklımdan geçen şey, bunun bir elementin "başlık" özelliğini şekillendirmeye çalışmak gibi olabileceğini düşündüm. Yani hem düşünmek için + 1! - David Murdoch
@MathiasBynens : Yer tutucu gösterilen sözde sınıf, bu tür yer tutucu metin gösteren bir giriş öğesiyle eşleşir. Yani eşleşiyor <input> etiket gibi input seçici, ancak şimdi yer tutucu metin gösteriliyor. Ayrıca, yer tutucu özniteliğinin kendisiyle eşleşmiyor. - HEX
@HEX gibi değil input seçici çünkü bu hepsini seçer input elementler. :placeholder-shown sadece seçer input Şu anda yer tutucuyu gösteren, yalnızca bu öğeleri stilleyebilmenizi ve yer tutucu metnini etkili biçimde stilleyebilmenizi sağlayan öğeler. Ne demeye çalışıyorsun? - Mathias Bynens
@HEX (Elbette, ayrıca seçildi textarea Yer tutucu metin gösteren öğeler.) - Mathias Bynens


Cevaplar:


uygulama

Üç farklı uygulama vardır: sözde öğeler, sözde sınıflar ve hiçbir şey.

  • WebKit, Blink (Safari, Google Chrome, Opera 15+) ve Microsoft Edge, sahte bir öğe kullanıyor: ::-webkit-input-placeholder. [Ref]
  • Mozilla Firefox 4 ila 18 bir sözde sınıf kullanıyor: :-moz-placeholder (bir kolon). [Ref]
  • Mozilla Firefox 19+ bir sahte öğe kullanıyor: ::-moz-placeholderama eski seçici hala bir süre çalışacak. [Ref]
  • Internet Explorer 10 ve 11 bir sahte sınıf kullanıyor: :-ms-input-placeholder. [Ref]
  • Nisan 2017: Çoğu modern tarayıcı basit sözde öğeyi destekler ::placeholder  [Ref]

Internet Explorer 9 ve daha düşük desteklemiyor placeholder tüm özellik Opera 12 ve daha düşük desteklemiyor Yer tutucular için herhangi bir CSS seçicisi.

En iyi uygulama hakkında tartışma devam ediyor. Sözde elemanların gerçek öğeler gibi hareket ettiğini unutmayın. Gölge DOM. bir padding üzerinde input Sözde öğe ile aynı arka plan rengini almayacak.

CSS seçiciler

Kullanıcı aracıların bilinmeyen bir seçiciyle bir kuralı yok sayması gerekir. Görmek Seçiciler Seviye 3:

bir grup Geçersiz bir seçici içeren seçicilerin geçersiz.

Her tarayıcı için ayrı kurallara ihtiyacımız var. Aksi halde, tüm grup tüm tarayıcılar tarafından göz ardı edilir.

::-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!">

Kullanım notları

  • Kötü kontrastlardan kaçınmaya dikkat edin. Firefox'un yer tutucusu, azaltılmış bir opaklıkla varsayılan olarak görünüyor, bu yüzden kullanımı gerekiyor opacity: 1 İşte.
  • Yer tutucu metnin sığmıyorsa kesileceğini unutmayın - giriş öğelerinizi em ve bunları büyük minimum yazı tipi boyutu ayarlarıyla test edin. Çevirileri unutma: bazı diller daha fazla yere ihtiyacım var Aynı kelime için.
  • HTML desteği olan tarayıcılar placeholder ancak bunun için CSS desteği olmadan (Opera gibi) test edilmeli.
  • Bazı tarayıcılar bazıları için ek varsayılan CSS kullanır input tipleri (email, search). Bunlar beklenmedik şekillerde renderlemeyi etkileyebilir. Kullan özellikleri  -webkit-appearance ve -moz-appearance bunu değiştirmek için. Örnek:
    [type="search"] {
        -moz-appearance:    textfield;
        -webkit-appearance: textfield;
        appearance: textfield;
    }

4531
2018-06-06 08:47



Ayrıca, Webkit'in bunu oldukça güçlü bir özgüllüğe sahip olarak görmesine rağmen, Mozilla'nın bunu yapmadığını unutmayın. Bir şeylerin ortaya çıkması için orada bir kaç tane önemli içeriğe sahip olmanız muhtemeldir. - dmnc
@toscho: büyük cevap için teşekkürler. Sadece "canlı" bir gösteriye ihtiyacım vardı, bu yüzden örneğinize buradan ulaşabilirsiniz: jsfiddle.net/Sk8erPeter/KyVXK. Tekrar teşekkürler. - Sk8erPeter
Firefox'un yer tutucusu, azaltılmış bir opaklıkla varsayılan olarak görünüyor. Herkes için zor canlandırıcı ve neden bu işe yaramaz görünüyor merak ediyorum (neden benim beyaz metin hala gri ..), opaklığı kullanın: 1 - jwinn
IE10'da *:-ms-input-placeholder ve :-ms-input-placeholder kendi başına çalışmıyor, ama INPUT:-ms-input-placeholder yapar. Garip. - Jared
Bootstrap 3 için not: "form-kontrol" sınıfı, CSS özgüllüğünden dolayı rengi geçersiz kılar (yani "form-kontrol :: - webkit-giriş-yer tutucu"), bu nedenle en azından belirli bir şekilde veya "! Önemli" yi kullanmanız gerekir. senin CSS'de. (Bu ne Firebug ne de Devtools bu sahte sınıfı göstermek gibi görünmüyordu) - Costa


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

Bu tüm stil olacak input ve textarea tutucuları.

Önemli Not: Bu kuralları gruplandırmayın. Bunun yerine, her seçici için ayrı bir kural yapın (bir gruptaki geçersiz seçmen, tüm grubu geçersiz kılar).


656
2018-02-09 16:44



Bağlantı kurduğunuz MSDN dokümanı, yalnızca Internet Explorer 10'da desteklendiğini belirtiyor. Hala iyi bir bulgu, ancak IE10 kullanıcı tabanı belirgin hale gelinceye kadar pek kullanışlı değil (bunun için bir zaman dilimine bakabiliriz). - danishgoel
Gerçekçi olarak, yer tutucuları sitenin her yerine tek biçimli olarak uyarlamak isteyeceksiniz. - BadHorsie
FF19'dan sonra kullanmanız gereken :: - moz-placeholder - viplezer
IE (11) üzerinde çalışabilmesi için, bu CSS'yi giriş sayfanızın alt kısmında da eklemeniz gerekir. JSFiddle üzerinde bu çatal bakın jsfiddle.net/9kkef. Sayfayı IE'de ve başka bir tarayıcıda açın, IE'de yer tutucu metnin uygulanacak sınıfın renginde olacağını göreceksiniz. - Timo002


Ayrıca textareas stili de isteyebilirsiniz:

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

260
2017-09-14 12:52



kromda baskı yapmıyor ... herhangi bir yardım @media print {input [type = text] .form-control :: - webkit-giriş-yer tutucu, girdi [type = textarea] .form-control :: - webkit - giriş-yer tutucu {color: #FFFFFF; }} - Mahdi Alkhatib


İçin çizme atkısı ve Az kullanıcılar, bir mixin .placeholder var:

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



Veya daha da basit, değişkeni düzenleyin @input-color-placeholder - genellikle bulunur variables.less - William
@William, seçicinin kendisini tanımlamak ve başka bir girdinin yer tutucusunu farklı bir renk yapmak istediğinizde geri dönmek ve değiştirmek zorunda kalmamak için mixini kullanmak daha kolay olmaz mıydı? - Brandito
@Brandito - bu bir kenar kasasına benzer - genellikle yer tutucu rengi bir tasarımdaki tüm form öğeleri için aynıdır. - William
@William Üzgünüm, bu soruyu anlatabilmek için çok kötüyüm, dürüst olmak gerekirse, giriş renginin argümanıyla karışmayı kullanmak daha iyi olurdu diye düşündüm, muhtemelen kenar durumları düşünüyorum. ' m (renkli bir arka plan üzerinde arama giriş yer tutucuyu şekillendiriyor: P) çok üzgün ama haklısınız, özür dilerim. - Brandito
@Brandito Her şey güzel. Her zaman kenar durumları vardır. - William


Toscho'nun cevabına ek olarak, Chrome 9-10 ile Safari 5 arasında desteklenen bazı CSS özelliklerinin desteklediği CSS özellikleriyle bazı webkit tutarsızlıklarını fark ettim.

Özellikle Chrome 9 ve 10 desteklemiyor background-color, border, text-decoration ve text-transform Yer tutucuyu şekillendirirken.

Tam tarayıcı karşılaştırması İşte.


92
2018-04-14 02:28





İçin şımarıklık kullanıcılar:

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



Daha esnek bir yol - kullanmak @content; - milkovsky


Bu iyi çalışacaktır. DEMO BURADA:

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



Firefox v56'da da önemliydi! - Savage


Firefox ve Internet Explorer'da normal giriş metni rengi, yer tutucuların renk özelliğini geçersiz kılar. Yani, ihtiyacımız var

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





Çapraz tarayıcı çözümü:

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

Kredi: David Walsh


37





Artık bir girişin yer tutucusuna CSS'yi uygulamak için standart bir yolumuz var: ::placeholder sözde element bu CSS Modülü Seviye 4 Taslak.


35



Bu Firefox 51'de çalışıyor. Ben sadece bu yöntemi kullanacağım; diğer tarayıcılar benim için yeterince yakında yetişecekler (standart standart stili uygulanmadığında işlevsellik bozulmadığı sürece). - Lonnie Best