Couldn't find default placeholder style for input element.
There are no any webkit-input-placeholder, -moz-placeholder, -moz-placeholder, or -ms-input-placeholder style settings in any css files.
UPDATE: Guys, don't hurry to judge me.
I have the legacy code (tones of css files). The one placeholder style (font-weight, color and so on) is not properly shown in IE 11. I started to find where the placeholder style is defined. And I didn't find any placeholder style declaration you all mentioned.
So I assume there is a default style for placeholder in browser.
Webkit's User Agent Stylesheet (Chrome & Safari) can be found here: http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css
Their CSS shows:
::placeholder {
-webkit-text-security: none;
color: darkGray;
pointer-events: none !important;
}
input::placeholder, isindex::placeholder {
white-space: pre;
word-wrap: normal;
overflow: hidden;
}
I can't find any other sources that have the defaults for other browsers, but I imagine they would be close to this.
Please do refer the style for PlaceHolder...
<input placeholder='hello'/> <br />
<textarea placeholder='hello'></textarea>
For Example
/* do not group these rules */
*::-webkit-input-placeholder {
color: red;
}
*:-moz-placeholder {
/* FF 4-18 */
color: red;
}
*::-moz-placeholder {
/* FF 19+ */
color: red;
}
*:-ms-input-placeholder {
/* IE 10+ */
color: red;
}
To style the place holders you should use vendor-prefixed selectors
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: pink;
}
::-moz-placeholder { /* Firefox 19+ */
color: pink;
}
:-ms-input-placeholder { /* IE 10+ */
color: pink;
}
:-moz-placeholder { /* Firefox 18- */
color: pink;
}
You can even scope the elements,
input[type="email"].user_email::-webkit-input-placeholder {
color: blue;
}
Please refer this answer, Different place holder implementations and usage
Placeholder styling supported by a lot of browsers,
look here: http://caniuse.com/#feat=input-placeholder
Example -
Style:
<style type="text/css">
input:-ms-input-placeholder {
color:pink;
font-style:italic;
text-transform:uppercase;
text-align:center;
}
input::-webkit-input-placeholder {
color:pink;
font-style:italic;
text-transform:uppercase;
text-align:center;
}
input:-moz-placeholder {
color:pink;
font-style:italic;
text-transform:uppercase;
text-align:center;
}
/* firefox 19+ */
input::-moz-placeholder {
color:pink;
font-style:italic;
text-transform:uppercase;
text-align:center;
}
</style>
HTML:
<input type="text" placeholder="Placeholder Text" size="40">
working code on Plunker: https://plnkr.co/edit/bpTg4zIQfGD580XKo7q8?p=preview
Related
When I try to change the placeholder's color:
::-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;
}
I get the error:
validation (css 4.0): "::placeholder" is not a valid pseudo-element
and
validation (css 4.0): "::-ms-input-placeholder" is not a valid pseudo-element
When I run this code the placeholder of the input remains the same grey color and I'm not really sure where to go from here. I'm using the ASP .NET MVC framework.
This code works with my project.
<style>
.FilterInputs::placeholder {
color: #d2ddec;
opacity: .8;
}
</style>
I am sorry this is a late response and I hope someone coming after this gets to use this, You can simply put the prefix "input" before ::-moz-placeholder and ::-webkit depending on the intended browser
For example :
input::-moz-placeholder { /* Firefox */
color: dimgrey;
opacity: 1;
}
input::-webkit-input-placeholder { /* Chrome */
color: dimgrey;
opacity: 1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: dimgrey;
}
:-ms-input-placeholder { /* Microsoft Edge */
color: dimgrey;
}
I'm 99% sure that using ::placeholder without any vendor prefixes is safe. No surprises, when testing on all 3 window and 2 Android browsers -- it works.
Try the following:
☑️ Review my demo ... is the text red?
☑️ Go to your real code and remove all of the extra selectors until there's only one remaining. Ensure that selector has no vendor is prefixes ... the text red?
☑️ Try placing the ::placeholder as the last rule within the </style> tag.
☑️ Increase specificity by doubling. selector input::placeholder::placeholder
input {
display: block;
width: 80%;
outline: #930;
border: inset;
padding: 3px 5px;
margin: 10px auto;
}
input::placeholder {
color: red;
}
input:focus {
outline: 0;
}
<input type="text" placeholder="HUGE RED TEXT AS A PLACEHOLDER">
I'm using placeholders for a control that takes user input.
If the placeholder is blank, it displays the placeholder.
I'd like to have the each input is separated by a span.
I'm trying to match the color of the span separators with the input placeholder color.
input {
width:30px;
border:none;
}
input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: red;
}
/*this doesn't work */
input::-webkit-input-placeholder+span { /* Chrome/Opera/Safari */
color: red !important;
}
<input placeholder="mm"><span>/</span><input style="padding-left:5px" placeholder="yyyy" >
This is approach is working for IE using the :-ms-input-placeholder selector.
Any thoughts or insights as to why this isn't working in Chrome (or Mozilla) would be greatly appreciated.
You are probably looking for :placeholder-shown
input {
width: 30px;
border: none;
color: red;
}
input::-webkit-input-placeholder {
color: gray;
}
input:placeholder-shown+span {
color: gray;
}
span {
color: red;
font-size:20px;
padding:0 10px;
}
<input placeholder="TEST"><span>/</span><input style="padding-left:5px" placeholder="TEST">
I know there is this post on changing the placeholder text. I've tried implementing in on my textarea tags
textarea::-webkit-input-placeholder {
color: #fff;
}
textarea:-moz-placeholder { /* Firefox 18- */
color: #fff;
}
textarea::-moz-placeholder { /* Firefox 19+ */
color: #fff;
}
textarea:-ms-input-placeholder {
color: #fff;
}
but it's not doing anything. What am I missing?
This is what one of my textarea's looks like
<textarea
onChange={(e) => this.props.handleUpdateQuestion(e, firstQuestion.Id)}
placeholder="Overall Satisfaction Question"
name="SEO__Question__c"
type="text"
className="slds-input"
value={firstQuestion.SEO__Question__c ? firstQuestion.SEO__Question__c : ''}
style={inputStyle}
autoFocus
/>
For modern browsers, use just the ::placeholder pseudo element:
textarea::placeholder {
color: #0bf;
}
Legacy and modern browsers:
textarea:-moz-placeholder, /* Firefox 18- */
textarea::-moz-placeholder, /* Firefox 19+ */
textarea:-ms-input-placeholder, /* IE 10+ */
textarea::-webkit-input-placeholder, /* Webkit based */
textarea::placeholder { /* Modern browsers */
color: #0bf;
}
<textarea placeholder="test"></textarea>
And related to your code, wrap in quotes:
onchange="{(e) => this.props.handleUpdateQuestion(e, firstQuestion.Id)}"
I am not sure but I think is not necessary to use the prefixes right now.
textarea::placeholder {
color: #fff;
}
::-webkit-input-placeholder {
color: orange;
}
:-moz-placeholder { /* Upto Firefox 18, Deprecated in Firefox 19 */
color: orange;
}
::-moz-placeholder { /* Firefox 19+ */
color: orange;
}
:-ms-input-placeholder {
color: orange;
}
textarea::placeholder {color: #fff;}
This question already has answers here:
Change a HTML5 input's placeholder color with CSS
(43 answers)
Closed 8 years ago.
I would like to change the color of the placeholder of my textfield. Here is my code. Thanks in advance
<input type="text" placeholder="input here"/>
Here is jsFiddle for you. Solution
You can use following css to implement the same
::-webkit-input-placeholder { /* WebKit browsers */
color: #909;
}
:-moz-placeholder {
color: #999;
}
::-moz-placeholder {
color: #999;
}
:-ms-input-placeholder {
color: #999;
}
You can use style to change the color of placeholder.
<input type="text" placeholder="input here" />
Then in your css write-
::-webkit-input-placeholder { /* WebKit browsers */
color: Red;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: Red;
opacity: 1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: Red;
opacity: 1;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
color: Red;
}
See the output in http://jsfiddle.net/w1wjo6q4/1/
Thanks & Regards
I have styled placeholder text with CSS using the psuedo elements and pseudo classes below. This gets the job done on all major browsers but Opera. My understanding is Opera does not support styling placeholder text. Does anyone know of a way to style Opera input placeholder text?
CSS
::-webkit-input-placeholder {
color: red;
font-size: 10px;
}
::-moz-placeholder {
color: red;
font-size: 10px;
}
:-moz-placeholder {
color: red;
font-size: 10px;
}
:-ms-input-placeholder {
color: red;
font-size: 10px;
}
input:-moz-placeholder {
color: red;
font-size: 10px;
}
Both existing ways to style placeholder available in Firefox and WebKit are vendor-prefixed and nonstandard and should not be used in production. For future-proofness, use JavaScript to remove placeholder attribute and use either value (in conjunction with a class like placeholder to bind placeholder styles to) of form field or an additional text element to emulate placeholder functionality. This will work consistently across browsers (current and future ones) including Opera.
Opera supports placeholder text styling starting from version 22.0.1471.70 (17 June, 2014), so above CSS works now.
You can style the placeholders like so:
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: pink;
}
::-moz-placeholder { /* Firefox 19+ */
color: pink;
}
:-ms-input-placeholder { /* IE 10+ */
color: pink;
}
:-moz-placeholder { /* Firefox 18- */
color: pink;
}
I would suggest to check this link to check for browser compatibility: https://caniuse.com/#search=input-placeholder