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
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 know how to change the font-family of input and textarea in html. But what I am concerned with is - is it possible for two textarea fields to have fonts different from each other? If yes, then how?
Thanks.
You can style your textarea placeholders differently using a combination selector:
#two:-prefix-input-placeholder
For example will style the placeholder with the id 'two' whilst including the placeholder prefix. See below for an example of this (tested on chrome and IE 11):
::-webkit-input-placeholder {
color: red;
}
:-moz-placeholder { /* Firefox 18- */
color: red;
}
::-moz-placeholder { /* Firefox 19+ */
color: red;
}
:-ms-input-placeholder {
color: red;
}
/***********************/
#two::-webkit-input-placeholder {
color: blue;
}
#two:-moz-placeholder { /* Firefox 18- */
color: blue;
}
#two::-moz-placeholder { /* Firefox 19+ */
color: blue;
}
#two:-ms-input-placeholder {
color: blue;
}
<textarea placeholder="this is some text"></textarea>
<textarea placeholder="this is some text" id="two"></textarea>
You should set two different CSS classes on the textareas. Then you can choose separate fonts for each class in your CSS.
Give your textareas an id
<textarea rows="4" cols="50" placeholder="Some text" id="txtFont1"></textarea>
<textarea rows="4" cols="50" placeholder="Some text" id="txtFont2"></textarea>
Then style them
#txtFont1{
font-family: century gothic;
}
#txtFont2{
font-family: times new roman;
}
You can use different selectors for each input and then target them to apply different fonts in them.
However, be aware that using additional fonts adds loading time to site pages so you should be careful and balance styling and performance.
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
This is driving me nuts. I have a form where I have set the text color to be purple, but for some reason the select text is "stronger" than the input text. Can't figure out why!
http://jsfiddle.net/ZtyHS/
Any suggestions?
My CSS:
.formBox, .normSelect {
color: purple;
font-size: 15px;
padding: 6px 8px 5px;
outline-color: transparent;
-webkit-border-radius: 2px;
border-radius: 2px;
}
What you're seeing is the placeholder, which is the text shown when no value is entered. http://css-tricks.com/snippets/css/style-placeholder-text/ and Change an HTML5 input's placeholder color with CSS explains how to style the placeholder:
::-webkit-input-placeholder { /* WebKit browsers */
color: #999;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #999;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #999;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
color: #999;
}
If you type in the field, you'll notice your input is the same color as the select box text. What's the difference? It's placeholder text. See this answer for a much better explanation than I can give on placeholder styling: https://stackoverflow.com/a/2610741/495935
If you were talking about "Select" text then adding this will work !
font-weight:100;
font-size: 12px;
sroes has mentioned for placeholder !
This is what firefox will do to a 'placeholder' text
input::-moz-placeholder, textarea::-moz-placeholder {
display: inline-block !important;
opacity: 0.54; /* <-- SEE THIS ? */
overflow: hidden !important;
pointer-events: none !important;
resize: none !important;
}
Each and every 'supportive' browser will style by default.
See http://blog.ajcw.com/2011/02/styling-the-html5-placeholder/
Use sroes answer to style your input[placehorder] and you should be ok.
Finaly, to answer your question 'Any suggestions?' : well, yes i have one : let's play chess or parcheesi.