Pytanie Zmień kolor symbolu zastępczego HTML5 za pomocą CSS


Chrome obsługuje atrybut zastępczy na input[type=text] elementy (inne prawdopodobnie też).

Ale następujące CSS nie robi nic z wartością zastępczą:

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

Value pozostanie grey zamiast red.

Czy istnieje sposób na zmianę koloru tekstu zastępczego?


3600
2018-04-09 20:36


pochodzenie


Szybkie heads-up (nie rozwiązanie, tylko FYI): jeśli dobrze pamiętam, input [placeholder] po prostu pasuje do znaczników <input>, które mają atrybut placeholder, nie pasuje do samego atrybutu placeholder. - pinkgothic
Tak, przyszło mi do głowy, że może to być jak próba nadania atrybutowi "tytułu" elementu. Więc +1 za myślenie! - David Murdoch
@MathiasBynens Pseudo-klasa: placeholder-shown dopasowuje element wejściowy wyświetlający taki tekst zastępczy. Dopasowuje się <input> tag, jak input selektora, ale teraz pokazuje tekst zastępczy. Nie pasuje również do samego atrybutu placeholder. - HEX
@HEX To nie jest tak jak input selektor, ponieważ to wszystko wybiera input elementy. :placeholder-shown tylko wybiera input elementy, które aktualnie pokazują symbol zastępczy, pozwalając ci tylko stylizować te elementy i skutecznie stylizować tekst zastępczy. Co próbujesz powiedzieć? - Mathias Bynens
@HEX (Oczywiście, to również wybrane textarea elementy, które wyświetlają tekst zastępczy.) - Mathias Bynens


Odpowiedzi:


Realizacja

Istnieją trzy różne implementacje: pseudoelementy, pseudoklasy i nic.

  • WebKit, Blink (Safari, Google Chrome, Opera 15+) i Microsoft Edge używają pseudoelementu: ::-webkit-input-placeholder. [Ref]
  • Mozilla Firefox od 4 do 18 używa pseudoklasy: :-moz-placeholder (jeden dwukropek). [Ref]
  • Mozilla Firefox 19+ używa pseudoelementu: ::-moz-placeholder, ale stary selektor będzie działał przez jakiś czas. [Ref]
  • Internet Explorer 10 i 11 używają pseudoklasy: :-ms-input-placeholder. [Ref]
  • Kwiecień 2017 r .: Większość nowoczesnych przeglądarek obsługuje prosty pseudoelement ::placeholder  [Ref]

Internet Explorer 9 i nowsze nie obsługują placeholder atrybut w ogóle, podczas gdy Opera 12 i niższe nie obsługują dowolny selektor CSS dla symboli zastępczych.

Dyskusja o najlepszej implementacji wciąż trwa. Zauważ, że pseudoelementy działają jak prawdziwe elementy w Shadow DOM. ZA padding na input nie uzyska tego samego koloru tła co pseudoelement.

Selektory CSS

Aplikacje klienckie muszą zignorować regułę przy użyciu nieznanego selektora. Widzieć Selektory poziomu 3:

za Grupa selektorów zawierających niepoprawny selektor jest nieprawidłowy.

Dlatego potrzebujemy osobnych reguł dla każdej przeglądarki. W przeciwnym razie cała grupa zostanie zignorowana przez wszystkie przeglądarki.

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

Uwagi dotyczące użytkowania

  • Uważaj, aby uniknąć złych kontrastów. Wygląda na to, że symbol zastępczy Firefoksa ma zmniejszoną wartość krycia, więc musi go użyć opacity: 1 tutaj.
  • Zwróć uwagę, że tekst zastępczy jest po prostu odcięty, jeśli nie pasuje - rozmiar elementów wejściowych w em i przetestuj je z dużymi minimalnymi ustawieniami rozmiaru czcionki. Nie zapomnij o tłumaczeniach: niektóre języki potrzebujesz więcej miejsca dla tego samego słowa.
  • Przeglądarki obsługujące HTML dla placeholder ale bez obsługi CSS (podobnie jak Opera) powinno być przetestowane.
  • Niektóre przeglądarki używają niektórych domyślnych domyślnych stylów CSS input typy (email, search). Mogą one wpływać na renderowanie w nieoczekiwany sposób. Użyj nieruchomości  -webkit-appearance i -moz-appearance to zmienić. Przykład:
    [type="search"] {
        -moz-appearance:    textfield;
        -webkit-appearance: textfield;
        appearance: textfield;
    }

4531
2018-06-06 08:47



Zauważ też, że chociaż Webkit uważa, że ​​ma dość silną specyfikę, Mozilla tego nie robi. Najprawdopodobniej będziesz musiał umieścić tam kilku importerów, aby pokazać, co się dzieje. - dmnc
@toscho: dzięki za wspaniałą odpowiedź. Potrzebowałem tylko małej demonstracji "na żywo", więc twój przykład można również znaleźć tutaj: jsfiddle.net/Sk8erPeter/KyVXK. Dzięki jeszcze raz. - Sk8erPeter
Wygląda na to, że element zastępczy Firefoksa domyślnie ma zmniejszone krycie. Dla każdego, kto jest ciężko odświeżający i zastanawia się dlaczego do cholery to nie działa ("dlaczego mój biały tekst wciąż jest szary ..."), użyj nieprzezroczystości: 1 - jwinn
W IE10 *:-ms-input-placeholder i :-ms-input-placeholder samo w sobie nie działa, ale INPUT:-ms-input-placeholder robi. Dziwny. - Jared
Uwaga do Bootstrap 3: klasa "form-control" przesłania kolor ze względu na specyfikę CSS (np. "Form-control :: - webkit-input-placeholder"), więc musisz być przynajmniej tak konkretny lub użyć "! Important" w twoim CSS. (to było piekło do debugowania, ponieważ ani Firebug, ani Devtools nie wydają się pokazywać tej pseudo-klasy) - 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>

To wszystko będzie stylem input i textarea placeholders.

Ważna uwaga: Nie grupuj tych reguł. Zamiast tego utwórz osobną regułę dla każdego selektora (jeden nieprawidłowy selektor w grupie powoduje, że cała grupa jest nieważna).


656
2018-02-09 16:44



Dokument MSDN, do którego jesteś podłączony, stwierdza, że ​​jest on obsługiwany tylko w Internet Explorerze 10. Wciąż dobre znalezisko, ale niezbyt użyteczne, dopóki baza użytkowników IE10 nie stanie się znacząca (możemy na to patrzeć przez lata). - danishgoel
Realistycznie, będziesz chciał jednolicie stylizować elementy zastępcze na stronie, a nie nadawać każdemu indywidualnemu wprowadzeniu identyfikatora. - BadHorsie
Po FF19 musisz użyć :: - moz-placeholder - viplezer
Musisz umieścić ten CSS na dole arkusza stylów, jeśli zastosujesz również klasę na wejściu, aby uruchomić ją w IE (11). Zobacz to widelec na JSFiddle jsfiddle.net/9kkef. Otwórz stronę zarówno w IE, jak iw innej przeglądarce, w IE zobaczysz, że tekst zastępczy będzie w kolorze zastosowanej klasy. - Timo002


Możesz również chcieć stylizować style tekstowe:

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

260
2017-09-14 12:52



na drukowanie w chrome nie działa ... żadna pomoc @media print {input [type = text] .form-control :: - webkit-input-placeholder, input [type = textarea] .form-control :: - webkit -input-placeholder {color: #FFFFFF; }} - Mahdi Alkhatib


Dla Bootstrap i Mniej użytkowników, istnieje 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



Lub jeszcze prostsze, edytuj zmienną @input-color-placeholder - zwykle znajduje się w variables.less - William
@William nie byłoby łatwiej zdefiniować sam selektor i używać mixin, aby uniknąć konieczności powrotu i zmienić go w przypadku, gdy chcesz, aby symbol innego elementu wejściowego miał inny kolor? - Brandito
@Bandito - to brzmi jak przypadek krawędzi - ogólnie kolor zastępczy jest taki sam dla wszystkich elementów formularza w projekcie. - William
@William Przepraszam, jestem okropny w sformułowaniu tego rodzaju rzeczy, myślałem, że byłoby lepiej, aby użyć mixin z argumentem koloru wejściowego, którego pragniesz, chociaż całkiem szczerze, prawdopodobnie myślę o skrajnych przypadkach, Przyzwyczaiłem się do (stylowanie elementu zastępczego wprowadzania danych w miejscu, w którym jest na kolorowym tle: P) przepraszam, ale masz rację, przepraszam. - Brandito
@Brandito Wszystko w porządku. Zawsze są przypadki skrajne. - William


Oprócz odpowiedzi toscho zauważyłem pewne niespójności między webkitami między Chrome 9-10 i Safari 5 z obsługiwanymi właściwościami CSS, na które warto zwrócić uwagę.

W szczególności Chrome 9 i 10 nie obsługują background-color, border, text-decoration i text-transform podczas stylizowania symbolu zastępczego.

Pełne porównanie między przeglądarkami jest tutaj.


92
2018-04-14 02:28





Dla Sass użytkownicy:

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



Bardziej elastyczny sposób - do użycia @content; - milkovsky


To zadziała dobrze. DEMO TUTAJ:

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



Musiałem dodać! Ważne również w Firefoksie v56 - Savage


W przeglądarkach Firefox i Internet Explorer normalny kolor tekstu wejściowego zastępuje właściwość kolorów zastępczych. Więc musimy

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





Rozwiązanie dla różnych przeglądarek:

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

Kredyt: David Walsh


37





Teraz mamy standardowy sposób zastosowania CSS do symbolu zastępczego: ::placeholder pseudoelement z to Projekt poziomu 4 modułu CSS.


35



Działa to w przeglądarce Firefox 51. Po prostu użyję tej metody; inne przeglądarki wystarczająco szybko nadrobią zaległości (biorąc pod uwagę, że żadna funkcjonalność nie zostanie zerwana, jeśli nie zostanie zastosowany standardowy styl). - Lonnie Best


Użyj nowego ::placeholder Jeśli użyjesz autoprefixer.

Zwróć uwagę, że miks .placeholder pochodzi z Bootstrap jest przestarzałe na rzecz tego.

Przykład:

input::placeholder { color: black; }

Podczas używania autoprefiksu powyższe elementy zostaną przekonwertowane na poprawny kod we wszystkich przeglądarkach.


35