使用 CSS 改变 HTML5输入的占位颜色

Chrome supports the placeholder attribute on input[type=text] elements (others probably do too).

But the following CSS doesn't do anything to the placeholder's value:

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

Value will still remain grey instead of red.

Is there a way to change the color of the placeholder text?

</div>

转载于:https://stackoverflow.com/questions/2610497/change-an-html5-inputs-placeholder-color-with-css

csdnceshi61
derek5. Is there any way to change the color of single character in placeholder ?
接近 3 年之前 回复
csdnceshi55
~Onlooker Since this is a hot topic, I came up with another approach, to simulate a placeholder, which might be of interest
3 年多之前 回复
csdnceshi79
python小菜 I can see no problem here ... The placeholder's text color is now red. Maybe other modern browsers now support it.
3 年多之前 回复
csdnceshi62
csdnceshi62 (Of course, it also selected textarea elements that are showing placeholder text.)
接近 5 年之前 回复
csdnceshi62
csdnceshi62 It’s not like the input selector because that selects all input elements. :placeholder-shown only selects input elements that are currently showing the placeholder, allowing you to style those elements only, and effectively style the placeholder text. What are you trying to say?
接近 5 年之前 回复
csdnceshi51
旧行李 The :placeholder-shown pseudo-class matches an input element that is showing such placeholder text. So it matches <input> tag, like input selector, but showing placeholder text just now. It also doesn't match the placeholder attribute itself.
接近 5 年之前 回复
weixin_41568208
北城已荒凉 Yah, the thought crossed my mind that this may be like trying to style an element's "title" attribute. So +1 for thinking alike!
10 年多之前 回复
csdnceshi78
程序go Quick heads-up (not a solution, just a FYI): if I recall correctly, input[placeholder] just matches <input> tags that have a placeholder attribute, it doesn't match the placeholder attribute itself.
10 年多之前 回复

23个回答

Implementation

There are three different implementations: pseudo-elements, pseudo-classes, and nothing.

  • WebKit, Blink (Safari, Google Chrome, Opera 15+) and Microsoft Edge are using a pseudo-element: ::-webkit-input-placeholder. [Ref]
  • Mozilla Firefox 4 to 18 is using a pseudo-class: :-moz-placeholder (one colon). [Ref]
  • Mozilla Firefox 19+ is using a pseudo-element: ::-moz-placeholder, but the old selector will still work for a while. [Ref]
  • Internet Explorer 10 and 11 are using a pseudo-class: :-ms-input-placeholder. [Ref]
  • April 2017: Most modern browsers support the simple pseudo-element ::placeholder [Ref]

Internet Explorer 9 and lower does not support the placeholder attribute at all, while Opera 12 and lower do not support any CSS selector for placeholders.

The discussion about the best implementation is still going on. Note the pseudo-elements act like real elements in the Shadow DOM. A padding on an input will not get the same background color as the pseudo-element.

CSS selectors

User agents are required to ignore a rule with an unknown selector. See Selectors Level 3:

a group of selectors containing an invalid selector is invalid.

So we need separate rules for each browser. Otherwise the whole group would be ignored by all browsers.

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

Usage notes

  • Be careful to avoid bad contrasts. Firefox's placeholder appears to be defaulting with a reduced opacity, so needs to use opacity: 1 here.
  • Note that placeholder text is just cut off if it doesn’t fit – size your input elements in em and test them with big minimum font size settings. Don’t forget translations: some languages need more room for the same word.
  • Browsers with HTML support for placeholder but without CSS support for that (like Opera) should be tested too.
  • Some browsers use additional default CSS for some input types (email, search). These might affect the rendering in unexpected ways. Use the properties -webkit-appearance and -moz-appearance to change that. Example:
    [type="search"] {
        -moz-appearance:    textfield;
        -webkit-appearance: textfield;
        appearance: textfield;
    }
</div>
csdnceshi55
~Onlooker It should be noted that (at least in the most recent browsers I've tested) that you can set the color to color: inherit and it will inherit whatever color you've set the element to (in cases where you don't want a different color).
3 年多之前 回复
weixin_41568126
乱世@小熊 Please follow the link in the commit developer.microsoft.com/en-us/microsoft-edge/platform/issues/… ;)
大约 4 年之前 回复
csdnceshi62
csdnceshi62 That's just one commit, no explanation, no reference. I wouldn't take that very serious.
大约 4 年之前 回复
weixin_41568126
乱世@小熊 Be careful with setting opacity to anything else than 1 due to Edge parsing ::webkit-input-placeholder and running into a bug together with position set relative or absolute. See github.com/necolas/normalize.css/commit/… for more.
大约 4 年之前 回复
csdnceshi67
bug^君 I've noticed Chrome also messing with opacity of placeholders recently. I had to add opacity: 1; to ::-webkit-input-placeholder { }.
大约 4 年之前 回复
csdnceshi80
胖鸭 I wish this answer also mentioned ::placeholder (as mentioned in other answers), which is more similar to the vendor-specific ones than :placeholder-shown is.
4 年多之前 回复
csdnceshi61
derek5. How to apply to number? This doesn't seem to work: input[type="number"]::-webkit-input-placeholder {color: green;}
4 年多之前 回复
csdnceshi77
狐狸.fox I had to had "opacity:1" to get my CSS to work in FF 33.1 stackoverflow.com/questions/27041153/…
接近 6 年之前 回复
csdnceshi64
游.程 Note for Bootstrap 3: "form-control" class overrides the color due to CSS specificity (i.e. "form-control::-webkit-input-placeholder"), so you need to be at least as specific or use "!important" in your CSS. (this was hell to debug as neither Firebug nor Devtools seem to show this pseudo class)
大约 6 年之前 回复
weixin_41568127
?yb? In IE10 *:-ms-input-placeholder and :-ms-input-placeholder by itself does not work, but INPUT:-ms-input-placeholder does. Odd.
接近 7 年之前 回复
weixin_41568134
MAO-EYE i had to apply input[type=text]::-webkit-input-placeholder to get the placeholder to get color if i only applied input::-webkit-input-placeholder it does not work .It works with Id also
大约 7 年之前 回复
weixin_41568196
撒拉嘿哟木头 The CSS Selector rule explanation should be plated in gold. I struggled a lot before realizing the rule was getting ignored.
7 年多之前 回复
weixin_41568126
乱世@小熊 I've tested in Fx/Mac (Aurora) and Seamonkey and none of these had any rendering differences of [type="search"] compared to a normal text input field. So in a normalize.css similar way the only necessary property seems to be -webkit-appearance: textfield;
7 年多之前 回复
csdnceshi62
csdnceshi62 Follow the link properties.
7 年多之前 回复
weixin_41568126
乱世@小熊 Sorry, my question seems not be clear enough: What specific versions does this property address? Because on Windows, Firefox 5||19||21 doesn't change appearance of input[type="search"]. And I haven't found a single document so far that says Firefox --in contrast to Chrome-- changes default appearance.
7 年多之前 回复
csdnceshi62
csdnceshi62 That’s for all Mozilla based browsers.
7 年多之前 回复
weixin_41568126
乱世@小熊 Is -moz-appearance: textfield; for Firefox/Mac? Because I haven't seen any user agent stylesheet additions on PC…
7 年多之前 回复
csdnceshi58
Didn"t forge Regarding the note "Mozilla Firefox 19+ is using a pseudo-element: ::-moz-placeholder, but the old selector will still work for a while." - it no longer seems to work, at least for me (FF v20)
7 年多之前 回复
csdnceshi54
hurriedly% Firefox's placeholder appears to be defaulting with a reduced opacity. For anyone else hard-refreshing and wondering why the heck this doesn't appear to be working ("why is my white text still grey.."), use opacity:1
7 年多之前 回复
csdnceshi65
larry*wei You can also change any other CSS definition, for example remove the default opacity. On that case, remember that IE uses the filter. filter: alpha(opacity=1);
7 年多之前 回复
csdnceshi59
ℙℕℤℝ thanks for the great answer. I just needed a little demonstration of it "live", so your example can also be reached here: jsfiddle.net/Sk8erPeter/KyVXK. Thanks again.
接近 8 年之前 回复
csdnceshi72
谁还没个明天 Quite annoying, since using something like HTML5 Boilerplate will result in placeholder texts not being "dimmed" when using Firefox :/
8 年多之前 回复
csdnceshi62
csdnceshi62 Not necessary. There is still no standard that says what should happen in this case.
8 年多之前 回复
csdnceshi72
谁还没个明天 Using Firefox 12.0 on a Mac, it is possible to change the placeholder color with a regular input {color: red}, check this JSFiddle: jsfiddle.net/9tarR Bug?
8 年多之前 回复
csdnceshi53
Lotus@ That's even odder - pseudo-elements (WebKit's implementation) are less specific than pseudo-classes (Mozilla's implementation). Supposedly.
接近 9 年之前 回复
weixin_41568131
10.24 Note also that although Webkit considers this to have rather strong specificity, Mozilla does not. You are likely to have to pop a few !importants in there to get things to show up.
大约 9 年之前 回复
csdnceshi75
衫裤跑路 Are you missing a : for the -moz selectors?
大约 9 年之前 回复
csdnceshi62
csdnceshi62 Tested in version 8.a.2 just now – still works. Note the leading : in :-moz-placeholder.
大约 9 年之前 回复
csdnceshi68
local-host -moz-placeholder seems to no longer work in FF6.0 =/
大约 9 年之前 回复
csdnceshi62
csdnceshi62 Yes, that’s why you need the -webkit-appearance to let the pseudo element fill its parent box. In Mozilla you style a status, in WebKit a child element. There is no standard, and both implementations have pros and cons … I think, Mozilla’s is more consequent: it fits into the same scheme as :empty or :invalid.
大约 9 年之前 回复
csdnceshi53
Lotus@ Wait... WebKit's version is a pseudo-element while Gecko's version is a pseudo-class. Won't the styles be applied to entirely different things then?
大约 9 年之前 回复

You may also want to style textareas:

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
  color: #636363;
}
input:-moz-placeholder, textarea:-moz-placeholder {
  color: #636363;
}
csdnceshi66
必承其重 | 欲带皇冠 on printing in chrome doesn't work... any help @media print { input[type=text].form-control::-webkit-input-placeholder, input[type=textarea].form-control::-webkit-input-placeholder { color: #FFFFFF; } }
接近 5 年之前 回复

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

This will style all input and textarea placeholders.

Important Note: Do not group these rules. Instead, make a separate rule for every selector (one invalid selector in a group makes the whole group invalid).

</div>
csdnceshi78
程序go You need to put this CSS at the bottom of you stylesheet, if you also apply a class on the input, in order to get it working on IE (11). See this fork on JSFiddle jsfiddle.net/9kkef. Open the page both in IE and another browser, in IE you will see that the placeholder text will be in the color of the applied class.
6 年多之前 回复
csdnceshi50
三生石@ After FF19 you have to use ::-moz-placeholder
大约 7 年之前 回复
csdnceshi62
csdnceshi62 Realistically, you are going to want to style placeholders across the site uniformly, not style every individual input by ID.
大约 7 年之前 回复
csdnceshi68
local-host MSDN doc you linked to, states its only supported in Internet Explorer 10. Still a good find, but not very useful till IE10 userbase becomes significant (we may be looking at a time-frame of years for that).
8 年多之前 回复

Here is one more example:

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

</div>

OK, placeholders behave differently in different browsers, so you need using browser prefix in your CSS to make them identical, for example Firefox gives a transparency to placeholder by default, so need to add opacity 1 to your css, plus the color, it's not a big concern most of the times, but good to have them consistent:

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

try this code for different input element different style

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

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

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

How about this

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

No CSS or placeholder, but you get the same functionality.

weixin_41568131
10.24 Even your second version doesn't provide the same functionality. If the user submits the <form> with this input the placeholder text will be sent to the server. I seen so many sites do this wrong.
7 年多之前 回复
weixin_41568127
?yb? you could do this, but I personally prefer the first one. <input type="text" value="placeholder text" onfocus="if(!this.haswriting){this.style.color='#000'; this.value='';}" onblur="if(!this.value){this.style.color='#f00'; this.value='placeholder text'; this.haswriting=false;}else{this.haswriting=true};" style="color: #f00;"/>
7 年多之前 回复
csdnceshi61
derek5. what happens if someone clicks again after writing something.. the original text they wrote will be gone!
7 年多之前 回复

For Bootstrap and Less users, there is a mixin .placeholder:

// Placeholder text
// -------------------------
.placeholder(@color: @placeholderText) {
  &:-moz-placeholder {
    color: @color;
  }
  &:-ms-input-placeholder {
    color: @color;
  }
  &::-webkit-input-placeholder {
    color: @color;
  }
}
csdnceshi55
~Onlooker It's all good. There are always edge cases.
2 年多之前 回复
csdnceshi50
三生石@ Sorry I'm terrible at wording this sorta stuff, I thought it would've it be better to use the mixin with the argument of the input colour you desire although quite honestly, I'm probably thinking of the edge cases I'm used to (styling the search input placeholder where it's on a coloured background :P) so sorry but you're right, apologies.
2 年多之前 回复
csdnceshi55
~Onlooker - that sounds like an edge case - generally placeholder color is the same for all form elements within a design.
2 年多之前 回复
csdnceshi50
三生石@ wouldn't it be easier to define the selector itself and use the mixin to avoid having to go back and change it in case you're looking to make another input's placeholder a different colour?
2 年多之前 回复
csdnceshi55
~Onlooker Or even simpler, edit the variable @input-color-placeholder - usually found in variables.less
大约 6 年之前 回复

In Firefox and Internet Explorer, the normal input text color overrides the color property of placeholders. So, we need to

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

Cross-browser solution:

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

Credit: David Walsh

共23条数据 1 3 尾页
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问
相关内容推荐