Zmiana koloru zastępczego wejścia HTML5 za pomocą CSS
Chrome obsługuje atrybut placeholder na elementach input[type=text]
(inne prawdopodobnie też).
Ale następujący CSS nie robi nic z wartością elementu zastępczego:
input[placeholder], [placeholder], *[placeholder] {
color: red !important;
}
<input type="text" placeholder="Value">
Ale Value
pozostanie grey
zamiast red
.
Czy istnieje sposób na zmianę koloru tekstu zastępczego?
30 answers
Realizacja
Istnieją trzy różne implementacje: pseudo-elementy, pseudo-klasy i nic.
- WebKit, Blink (Safari, Google Chrome, Opera 15+) i Microsoft Edge używają pseudo-elementu:
::-webkit-input-placeholder
. [Ref ] - Mozilla Firefox od 4 do 18 używa pseudo-klasy:
:-moz-placeholder
(jeden dwukropek). [Ref ] - Mozilla Firefox 19+ używa pseudo-elementu:
::-moz-placeholder
, ale stary selektor będzie jeszcze przez jakiś czas. [Ref ] - Internet Explorer 10 i 11 używają pseudo-klasy:
:-ms-input-placeholder
. [Ref ] - Kwiecień 2017: większość nowoczesnych przeglądarek obsługuje prosty pseudo-element
::placeholder
[Ref]
Internet Explorer 9 i lower w ogóle nie obsługuje atrybutu placeholder
, Podczas Gdy Opera 12 i lower nie obsługuje żadnego selektora CSS dla elementów zastępczych.
Dyskusja o najlepszej realizacji wciąż trwa. Zauważ, że pseudoelementy działają jak rzeczywiste elementy w Dom cienia . A padding
na input
nie otrzyma tego samego koloru tła co pseudo-element.
Selektory CSS
Agenci użytkownika muszą zignorować regułę z nieznanym selektorem. Zobacz Poziom Selektorów 3:
Grupa selektorów zawierających nieprawidłowy Selektor jest nieprawidłowa.
Więc potrzebujemy osobnych zasad dla każdej przeglądarki. W przeciwnym razie cała grupa byłaby ignorowana 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 użytkowe
- uważaj, aby uniknąć złych kontrastów. Element Zastępczy Firefoksa wydaje się być domyślny ze zmniejszonym kryciem, więc musi użyć
opacity: 1
tutaj. - zauważ, że tekst zastępczy jest po prostu odcięty, jeśli nie pasuje do rozmiaru elementów wejściowych w
em
i przetestuj je z dużymi ustawieniami minimalnego rozmiaru czcionki. Nie zapomnij o tłumaczeniach: niektóre języki potrzebują więcej miejsca na to samo słowo. - przeglądarki z obsługą HTML dla
placeholder
, ale bez obsługi CSS dla tego (jak Opera) również powinny być testowane. - niektóre przeglądarki używają dodatkowego domyślnego CSS dla niektórych typów
input
(email
,search
). Mogą one wpłynąć na renderowanie w nieoczekiwany sposób. Użyj właściwości-webkit-appearance
i-moz-appearance
to zmienić. Przykład:
[type="search"] {
-moz-appearance: textfield;
-webkit-appearance: textfield;
appearance: textfield;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-01-07 14:00:37
/* 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 będzie stylizować wszystkie input
i textarea
placeholdery.
Ważna uwaga: nie Grupuj tych zasad. Zamiast tego zrób oddzielną regułę dla każdego selektora (jeden nieprawidłowy selektor w grupie powoduje, że cała grupa jest nieprawidłowa).
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-07-19 15:14:22
Możesz również stylować textareas:
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
color: #636363;
}
input:-moz-placeholder, textarea:-moz-placeholder {
color: #636363;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-07-23 20:45:21
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;
}
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-09-24 07:52:41
Oprócz odpowiedzi toscho zauważyłem pewne niespójności webkit między Chrome 9-10 i Safari 5 z obsługiwanymi właściwościami CSS, które są warte odnotowania.
W szczególności Chrome 9 i 10 nie obsługują background-color
, border
, text-decoration
i text-transform
podczas stylizacji elementu zastępczego.
Pełne porównanie między przeglądarkami jest tutaj .
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-09-25 13:04:08
Dla Sass użytkowników:
// 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);
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-09-24 07:54:57
To zadziała. 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" />
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-09-12 08:08:56
W przeglądarkach Firefox i Internet Explorer zwykły kolor tekstu wejściowego zastępuje właściwość color elementó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;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-09-24 07:48:14
Użyj nowego ::placeholder
Jeśli używasz autoprefixer .
Zauważ, że ... zamiast tego można użyć funkcji Mixin z Bootstrap.
Przykład:
input::placeholder { color: black; }
Podczas korzystania z autoprefixer powyższy kod zostanie przekonwertowany na poprawny kod dla wszystkich przeglądarek.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-02-13 08:19:53
Rozwiązanie między przeglądarkami:
/* 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
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-01-02 23:27:05
Teraz mamy standardowy sposób na zastosowanie CSS do elementu zastępczego wejścia: ::placeholder
pseudo-element z tego szkicu modułu CSS poziomu 4.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-08-12 03:11:39
Właśnie uświadomiłem sobie coś dla Mozilli Firefox 19+, że przeglądarka daje wartość krycia dla elementu zastępczego, więc kolor nie będzie taki, jaki naprawdę chcesz.
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;
}
Nadpisuję opacity
na 1, więc będzie dobrze.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-09-24 07:56:21
Nie pamiętam, gdzie znalazłem ten fragment kodu w Internecie(nie został napisany przeze mnie, nie pamiętam, gdzie go znalazłem, ani kto go napisał).
$('[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('');
}
})
});
Po prostu załaduj ten kod JavaScript, a następnie Edytuj swój symbol zastępczy za pomocą CSS, wywołując tę regułę:
form .placeholder {
color: #222;
font-size: 25px;
/* etc. */
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-09-24 07:50:27
Myślę, że ten kod zadziała, ponieważ symbol zastępczy jest potrzebny tylko dla tekstu typu input. Więc ten jeden wiersz CSS będzie wystarczający dla twojej potrzeby:
input[type="text"]::-webkit-input-placeholder {
color: red;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-09-24 07:57:58
Dla użytkowników Bootstrap, Jeśli używasz class="form-control"
, może wystąpić problem ze specyfikacją CSS. Powinieneś otrzymać wyższy priorytet:
.form-control::-webkit-input-placeholder {
color: red;
}
//.. and other browsers
Lub jeśli używasz mniej:
.form-control{
.placeholder(red);
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-09-24 07:53:37
Jeśli używasz Bootstrap i nie udało ci się to uruchomić, prawdopodobnie przegapiłeś fakt, że sam Bootstrap dodaje te selektory. To jest Bootstrap v3. 3 mówimy o.
Jeśli próbujesz zmienić symbol zastępczy wewnątrz .form-control Klasa CSS następnie należy ją nadpisać w następujący sposób:
.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;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-09-24 08:01:43
Co powiesz na to
<input type="text" value="placeholder text" onfocus="this.style.color='#000';
this.value='';" style="color: #f00;" />
Brak CSS lub placeholder, ale masz tę samą funkcjonalność.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-05-15 16:15:14
Ten krótki i czysty 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;}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-08-30 18:18:11
Próbowałem wszystkich kombinacji tutaj, aby zmienić kolor, na mojej platformie mobilnej, i ostatecznie było:
-webkit-text-fill-color: red;
Który zrobił sztuczkę.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-09-24 07:58:47
Dla użytkownika SASS / SCSS używającego , posiada wbudowaną funkcję.
//main.scss
@import 'bourbon';
input {
width: 300px;
@include placeholder {
color: red;
}
}
Wyjście CSS, możesz również pobrać tę część i wkleić do kodu.
//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;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-10-04 07:50:11
Wypróbuj ten kod dla innego elementu wejściowego inny styl
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;
}
Przykład 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;
}
Przykład 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;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-10-13 06:47:35
Dodanie bardzo ładnej i prostej możliwości: css filters !
Będzie stylizować wszystko, łącznie z symbolem zastępczym.
Poniższe elementy ustawią oba input
na tej samej palecie, używając filtra barwy do zmiany koloru. Teraz renderuje się bardzo dobrze w przeglądarkach (poza ie...)
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" />
, aby umożliwić użytkownikom dynamiczną zmianę go za pomocą wejścia wpisz kolor dla zmian lub aby znaleźć niuanse, sprawdź ten fragment:
From: 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()
body {background: black; color: white}
Choose a color!
<input type="color" id="stylo" oninput="stylElem()">
<br>
<div id="out"></div> <p>
<input placeholder="Hello world!" />
<input type="date" /><br>
<input type="range" />
<br>
<audio controls src="#"></audio> <br><br>
<video controls src="#"></video>
Css filters docs: https://developer.mozilla.org/en-US/docs/Web/CSS/filter
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-09-02 15:06:20
Oto jeszcze jeden przykład:
.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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-05-31 09:21:03
OK, symbole zastępcze zachowują się inaczej w różnych przeglądarkach, więc musisz użyć prefiksu przeglądarki w CSS, aby uczynić je identycznymi, na przykład Firefox domyślnie daje przezroczystość do elementu zastępczego, więc musisz dodać krycie 1 do css, plus kolor, to nie jest wielki problem większość razy, ale dobrze mieć je spójne:
*::-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;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-11 12:41:30
Możesz zmienić kolor zastępczy wejścia HTML5 za pomocą CSS. Jeśli przypadkiem, Twój konflikt CSS, ta uwaga kodu działa, możesz użyć (!ważne) jak poniżej.
::-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!">
Mam nadzieję, że to pomoże.Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-12-21 08:10:43
Możesz użyć tego do wprowadzania i ustawiania ostrości:
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+ */
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-05-13 15:19:23
Najprostszym sposobem byłoby:
#yourInput::placeholder {
color: red;/*As an example*/
}
/* if that would not work, you can always try styling the attribute itself: */
#myInput[placeholder] {
color: red;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-10-27 20:41:40
Oto rozwiązanie z selektorami 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+) i Microsoft Edge używają pseudoelementu:
::- webkit-input-placeholder. -
Mozilla Firefox 4 do 18 używa pseudo-klasy:
:- moz-placeholder (jeden dwukropek).
Mozilla Firefox 19+ używa pseudo-elementu:
::- moz-placeholder, ale stary selektor będzie jeszcze przez jakiś czas. -
Internet Explorer 10 i 11 używają pseudo-klasy:
:- ms-input-placeholder. - Internet Explorer 9 i lower w ogóle nie obsługuje atrybutu placeholder, podczas gdy Opera 12 i lower nie obsługuje żadnego selektora CSS dla elementów zastępczych.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-09-04 06:09:40
Kompas mA mixin do tego po wyjęciu z pudełka.
Weź swój przykład:
<input type="text" placeholder="Value">
I w SCSS za pomocą kompasu:
input[type='text'] {
@include input-placeholder {
color: #616161;
}
}
Zobacz dokumenty dla Mixin input-placeholder.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-09-20 12:37:05
Część HTML:
<form action="www.anything.com">
<input type="text" name="name"
placeholder="Enter sentence"/>
</form>
Pokażę jak zmienić kolor wyrażenia' wpisz zdanie ' za pomocą CSS:
::placeholder{
color:blue;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-07-18 03:35:34