HTML5 girişinin yer tutucu rengini CSS ile değiştirme

Chrome , öğelerdeki yer tutucu özelliğini destekler input[type=text](diğerleri de muhtemelen).

Ancak aşağıdakiler CSSyer tutucunun değerine hiçbir şey yapmaz:

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

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

Valuegreyyerine hala kalacak red.

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

uygulama

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

• WebKit, Blink (Safari, Google Chrome, Opera 15+) ve Microsoft Kenar sahte elemanı kullanıyorsunuz: ::-webkit-input-placeholder. ^{[ Ref ]}
• Mozilla Firefox 4 ila 18, sözde sınıf kullanıyor: :-moz-placeholder( bir iki nokta üst üste). ^{[ Ref ]}
• Mozilla Firefox 19+ sahte bir öğe kullanıyor: ::-moz-placeholderancak eski seçici bir süre daha çalışacak. ^{[ Ref ]}
• Internet Explorer 10 ve 11 sahte sınıfını kullanıyorsunuz: :-ms-input-placeholder. ^{[ Ref ]}
• Nisan 2017: Modern tarayıcıların çoğu basit sözde elemanı destekliyor ::placeholder ^{[ Ref ]}

Internet Explorer 9 ve alt desteklemediği placeholderhiç niteliği, süre Opera 12 ve desteklemeyen düşürmek tutucuları için herhangi CSS seçici.

En iyi uygulama ile ilgili tartışmalar devam etmektedir. Sahte öğelerin Shadow DOM'daki gerçek öğeler gibi davrandığını unutmayın . paddingÜzerindeki bir A input, sözde öğeyle aynı arka plan rengini elde etmez.

CSS seçicileri

Kullanıcı aracıları, bilinmeyen bir seçiciyle bir kuralı yok saymak zorundadır. Seviye 3 Seçicilerine bakınız :

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

Bu yüzden her tarayıcı için ayrı kurallara ihtiyacımız var. Aksi takdirde, tüm grup tüm tarayıcılar tarafından yok sayılır.

::-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 düşük bir opaklıkla varsayılan görünüyor, bu yüzden opacity: 1burada kullanılması gerekiyor.
• Yer tutucu metnin yalnızca giriş öğelerinizi boyutlandırmaması durumunda kesileceğini emve büyük minimum yazı tipi boyutu ayarlarıyla test edildiğini unutmayın. Çevirileri unutmayın: bazı diller aynı kelime için daha fazla alana ihtiyaç duyar .
• HTML desteği olan placeholderancak bunun için CSS desteği olmayan (Opera gibi) tarayıcılar da test edilmelidir.
• Bazı tarayıcılar bazı inputtürler için ek varsayılan CSS kullanır ( email, search). Bunlar, oluşturmayı beklenmedik şekillerde etkileyebilir. Kullanım özellikleri -webkit-appearance ve -moz-appearancebunu değiştirmek için. Misal:

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

Bu, tüm inputve textareayer tutucuları şekillendirir.

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

Ayrıca textareas tarzı da isteyebilirsiniz:

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

İçin Bootstrap ve Az kullanıcıları, bir mixin .placeholder vardır:

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

Toscho'nun cevabına ek olarak, Chrome 9-10 ve Safari 5 arasında CSS özellikleriyle dikkat çekmeye değer bazı webkit tutarsızlıkları fark ettim.

Özellikle Krom 9 ve 10 desteklemez background-color, border, text-decorationve text-transformtutucuyu stil zaman.

Tam çapraz tarayıcı karşılaştırması burada .

For Sass 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);
}

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

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

Firefox ve Internet Explorer'da, normal giriş metni rengi yer tutucuların color ö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; 
}

Ç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 bilgileri: David Walsh

Yeni kullanın ::placeholderkullanırsanız autoprefixer .

Bootstrap'tan .placeholder karışımının bu lehine kaldırıldığını unutmayın.

Misal:

input::placeholder { color: black; }

Otomatik düzeltici kullanıldığında yukarıdaki tüm tarayıcılar için doğru koda dönüştürülecektir.

Şimdi bir girişin yer tutucusuna CSS'yi uygulamak için standart bir yolumuz var: bu CSS Modül Seviye 4 Taslağından ::placeholdersözde eleman .

Mozilla Firefox 19+ için tarayıcının yer tutucu için bir opaklık değeri verdiğini fark ediyorum, böylece renk gerçekten istediğiniz gibi olmayacak.

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

opacity1'in üzerine yazdım , bu yüzden gitmek iyi olacak.

Bu kod snippet'ini internette nerede bulduğumu hatırlamıyorum (benim tarafımdan yazılmadı, nerede bulduğumu hatırlamıyorum ya da kim yazdı).

$('[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('');
            }
        })
    });

Bu JavaScript kodunu yükleyin ve ardından bu kuralı çağırarak yer tutucunuzu CSS ile düzenleyin:

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

Bir yer tutucu yalnızca girdi türü metin için gerekli olduğundan bu kod çalışacağını düşünüyorum. Yani bu tek satırlık CSS ihtiyaçlarınız için yeterli olacaktır:

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

İçin Bootstrap kullandığınız takdirde kullanıcılar, class="form-control"bir CSS özgüllük sorunu olabilir. Daha yüksek bir önceliğe sahip olmalısınız:

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

Veya Daha Az kullanıyorsanız :

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

Bootstrap kullanıyorsanız ve bu çalışmayı alamadıysanız muhtemelen Bootstrap'ın bu seçicileri eklediği gerçeğini kaçırdınız. Bu, bahsettiğimiz Bootstrap v3.3.

Bir .form-control CSS sınıfı içindeki yer tutucuyu değiştirmeye çalışıyorsanız, bunu şu şekilde geçersiz kılmalısınız :

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

Bu kısa ve temiz kod:

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

Buna ne dersin

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

CSS veya yer tutucu yok, ancak aynı işlevselliği elde edersiniz.

Mobil platformumdaki rengi değiştirmek için her kombinasyonu denedim ve sonunda:

-webkit-text-fill-color: red;

hile yaptı.

Bourbon kullanan SASS / SCSS kullanıcıları için yerleşik bir işlevi vardır.

//main.scss
@import 'bourbon';

input {
  width: 300px;

  @include placeholder {
    color: red;
  }
}

CSS Çıkışı, bu kısmı da alıp kodunuza yapıştırabilirsiniz.

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

farklı giriş öğesi farklı stil için bu kodu deneyin

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

örnek 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;
}

örnek 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;
   }

İşte bir örnek daha:

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

Gerçekten çok güzel ve basit bir olasılık eklemek: css filtreleri !

Yer tutucu dahil her şeyi şekillendirir.

Aşağıdakiler, renk değişimi için renk tonu filtresini kullanarak aynı paletteki her iki girişi de ayarlayacaktır. Artık tarayıcılarda çok iyi işliyor (yani ... hariç)

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

Kullanıcıların değişiklikler için bir girdi türü rengi kullanarak veya nüansları bulmak için dinamik olarak değiştirmelerine izin vermek için bu snippet'e göz atın:

Gönderen: 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 dokümanları filtreler: https://developer.mozilla.org/en-US/docs/Web/CSS/filter

Tamam, yer tutucular farklı tarayıcılarda farklı davranıyorlar, bu yüzden onları aynı hale getirmek için CSS'nizdeki tarayıcı önekini kullanmanız gerekiyor, örneğin Firefox varsayılan olarak yer tutucusuna şeffaflık veriyor, bu nedenle css'nize opaklık 1 eklemeniz gerekiyor, renk değil çoğu zaman büyük bir endişe, ancak tutarlı olmaları iyi:

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

HTML5 girişinin yer tutucu rengini CSS ile değiştirebilirsiniz. Şans eseri, CSS çakışma, bu kod not çalışma, aşağıdaki gibi (! Önemli) kullanabilirsiniz.

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

Umarım bu yardımcı olur.

Giriş ve odaklama stili için bunu kullanabilirsiniz:

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

En kolay yol:

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

Pusula kutusunun bu söylenmemesi için mixin sahiptir.

Örneğinizi alın:

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

Ve SCSS'de pusula kullanarak:

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

Giriş-yer tutucu karışımı için belgelere bakın.

İşte CSS seçicileri ile çözüm

::-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+) ve Microsoft Edge , sözde öğe kullanıyor:
  :: - webkit-input-placeholder.
• Mozilla Firefox 4 ila 18 sözde sınıfı kullanıyor
  :: -moz-placeholder (one colon).
  Mozilla Firefox 19+ sahte bir öğe kullanıyor:
  :: - moz-yer tutucu, ancak eski seçici bir süre daha çalışacak.
• Internet Explorer 10 ve 11 sözde sınıfı kullanıyor
  :: -ms-input-placeholder.
• Internet Explorer 9 ve daha düşük sürümleri yer tutucu özniteliğini desteklemezken, Opera 12 ve daha düşük sürümleri yer tutucular için herhangi bir CSS seçicisini desteklemez.

HTML'nin bir parçası:

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

CSS ile 'Cümle girin' ifadesinin rengini nasıl değiştireceğimizi göstereceğim:

  ::placeholder{
  color:blue;
   }