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;}
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">
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
I need to change the style of the placeholder in my framework. I need to override the instyle placeholder style the framework inserts for me. To do this I inserted the following code:
::-webkit-input-placeholder { color:#FFFF00 !important;}
::-moz-placeholder { color:#FFFF00 !important; } /* firefox 19+ */
:-ms-input-placeholder { color:#FFFF00 !important; } /* ie */
input:-moz-placeholder { color:#FFFF00 !important;}
This works and makes all placeholders this style. The problem is I need for fields with one class to be another color. To do this I did:
::-webkit-input-placeholder .my_class { color:#000000!important;}
::-moz-placeholder .my_class { color:#000000!important; } /* firefox 19+ */
:-ms-input-placeholder .my_class { color:#FFFF000 !important; } /* ie */
input:-moz-placeholder .my_class { color:#000000!important;}
This does not work though. The placeholders are still #FFFF00. How can I accomplish this?
put .my_class before the ::-x-placeholder pseudo elements
input {background:red;}/*added for contrast */
::-webkit-input-placeholder { color:#FFFF00 !important;}
::-moz-placeholder { color:#FFFF00 !important; } /* firefox 19+ */
:-ms-input-placeholder { color:#FFFF00 !important; } /* ie */
input:-moz-placeholder { color:#FFFF00 !important;}
.my_class::-webkit-input-placeholder { color:#000000!important;}
.my_class::-moz-placeholder { color:#000000!important; } /* firefox 19+ */
.my_class:-ms-input-placeholder { color:#FFFF000 !important; } /* ie */
input.my_class:-moz-placeholder { color:#000000!important;}
<input placeholder="test"/>
<input placeholder="test" class="my_class"/>
http://jsfiddle.net/vyDns/3/
.my_class::-webkit-input-placeholder {
color: blue! important;
}
I want to change the color of specific place holder. I'm using many input fields for my project, problem is that in some section i need grey color for placeholder and in some section i need white color for placeholder. I have searched for this purpose and find this solution.
::-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;
}
But this code is implement on all input placeholder, and i don't need all input placeholder in same color. So can anyone please help me. Thanks in advance.
You need to assign the -input-placeholder to some classname and add that class to any input you need its placeholder to have this, just like this JS Fiddle
.change::-webkit-input-placeholder {
/* WebKit, Blink, Edge */
color: #909;
}
.change:-moz-placeholder {
/* Mozilla Firefox 4 to 18 */
color: #909;
opacity: 1;
}
.change::-moz-placeholder {
/* Mozilla Firefox 19+ */
color: #909;
opacity: 1;
}
.change:-ms-input-placeholder {
/* Internet Explorer 10-11 */
color: #909;
}
input[type="text"]{
display:block;
width:300px;
padding:5px;
margin-bottom:5px;
font-size:1.5em;
}
<input type="text" placeholder="text1" class="change">
<input type="text" placeholder="text2">
<input type="text" placeholder="text3">
<input type="text" placeholder="text4" class="change">
<input type="text" placeholder="text5">
You could also use a Javascript solution without placeholder to do what you want to do. Here is the code:
//This fix allows you to change the color to whatever textcolor is while also making text go away when you click on it. However, this fix does not put the temporary placeholder back into the textarea when there is no text inside the input.
<input type="text" id="usr" value="Username" onclick="this.value = '';" style="color: red;"/>
<input type="text" id="pwd" value="Password" onclick="this.value = ''; this.type = 'password';" style="color: green;"/>
Please not that this fix is a temporary placeholder and should not be used for actual login forms. I would suggest using what #Ayaz_Shah recommended in his answer.
input::-moz-placeholder {
color: white;
}
input:-moz-placeholder {
color: white;
font-size: 14px !important;
}
*::-webkit-input-placeholder {
color: white;
font-size: 14px !important;
}
*:-ms-input-placeholder {
color: white;
font-size: 14px !important;
}
*:-moz-placeholder {
color: white;
font-size: 14px !important;
}
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