CSS Styling Placeholder Text

Change a HTML5 input's placeholder color with CSS

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

MaterialUI - Styling an Input's placeholder text

Styled components in es6 you can use this, create constant with style

//this out side the class
const inputStyle = {
  fontFamily: 'Open Sans', 
  fontSize: 18.9px
};

<Input
   style={inputStyle}
   fullWidth={true}
   placeholder="Business Email Address"
   onChange={this._onChange}
/>

I hope this work with you

How to set the color and font style of placeholder text

You can use the following code for cross-browser support:

For Google Chrome:

.element::-webkit-input-placeholder {
    color: blue;
    font-weight: bold;
}

For Mozilla Firefox:

.element::-moz-placeholder {
    color: blue;
    font-weight: bold;
}

For Internet Explorer:

.element:-ms-input-placeholder {
    color: blue;
    font-weight: bold;
} 

For Opera:

.element:-o-input-placeholder {
    color: blue;
    font-weight: bold;
} 

Changing the color of placeholder text of a select element

You can use ::placeholder pseudo in CSS, like this example:

::placeholder { color: #fff; }

If you want a cross-browser solution, you can use prefixes:

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #fff;
}
::-moz-placeholder { /* Firefox 19+ */
  color: #fff;
}
:-ms-input-placeholder { /* IE 10+ */
  color: #fff;
}
:-moz-placeholder { /* Firefox 18- */
  color: #fff;
}

The ::placeholder selector only selects the placeholder text inside your input, besides that, you can style the input itself when it is showing the placeholder using :placeholder-show.

Also, be aware that Firefox might show placeholder text lighter than it is supposed to display. to fix the issue you can use:

::-moz-placeholder {
  opacity: 1;
}

Styling part of the text in the placeholder

You may want to think about what the role and meaning of placeholders is. Most UI experts agree: placeholders are not labels. Labels (like "Search") are labels, and should be outside the text area. The placeholder is designed to be a sample input, or a format, not a label, nor instructions. To the extent that you use the placeholder in label-like fashion, that information will disappear as soon as the user starts typing.

For instance, in an input field for a phone number, the label would be "Phone Number", and the placeholder might be "212-555-1234". In your case, "Search" should be the label, and "brown fox" the placeholder. If you want to make that entire placeholder italics (but why?), you can do that easily enough with the placeholder pseudo-elements.

How to style the placeholder text of an Ionic ion-select component?

TLDR; Add the part attribute to the placeholder element inside the shadow dom and then style using ::part(thePartName) in css.

Here was my solution (I didn't love it). And by the way I am on Ionic 4.

So ultimately, the problem with styling elements inside the shadow DOM of certain ionic components, is that traditional CSS selectors from an outside* style stylesheet have zero affect on elements inside the shadow dom. This is one of the main points of the shadow DOM: to create encapsulated components where CSS doesn't leak in and doesn't leak out. There are two exceptions that I'm aware of:

1 - Use one of Ionic's CSS variables (aka CSS Custom Properties). These are limited to --placeholder-color in Ionic 4 and adding --placeholder-opacity in ionic 5. I happened to be on ionic 4 so i couldn't take advantage of the opacity variable. However to use these custom properties you would do so like this:

ion-select {
 --placeholder-color: 'hotpink';
}

I needed to style font-weight, font-style, and opacity so I needed another solution other than CSS Custom Properties.

2. There is a second way to style elements inside the shadow dom and that is using the ::part() pseudo element.

html that lives in the shadow dom provided by Ionic:

<div part="SorryIonicDoesntAddThisAttribute" class="select-text select-placeholder>my text</div>

Your css:

::part(thePartName) {
  opacity: 1;
  font-style: italic;
  font-weight: normal;
}

If the "part" HTML attribute exists on the element inside the shadow dom its like a portal into the shadow dom.

However in Ionic 4, Ionic doesn't add the part attribute to the ion-select component's elements in the shadow dom.

I used javascript to add it (inspired by @ivanreutkers comment) to add the part attribute so I could thus style it in CSS.

document.getElementById("the-id").shadowRoot.querySelector(".select-placeholder").setAttribute("part", "myPartName");

*Outside, meaning the stylesheet for my website/application and not the specific styles provided by Ionic that live inside the web component.

change placeholder text color of textarea

Wrap in quotes:

onchange="{(e) => this.props.handleUpdateQuestion(e, firstQuestion.Id)}"

otherwise, it should work just fine:

textarea::-webkit-input-placeholder {

  color: #0bf;

}

textarea:-moz-placeholder { /* Firefox 18- */

  color: #0bf;  

}

textarea::-moz-placeholder {  /* Firefox 19+ */

  color: #0bf;  

}

textarea:-ms-input-placeholder {

  color: #0bf;  

}

textarea::placeholder {

  color: #0bf;  

}

<textarea placeholder="test"></textarea>

how to change input text placeholder color if using foundation

Your CSS is probably overwritten by ZurbFoundation CSS, as you set your own styles before loading ZurbFoundation CSS. Try to switch the order of your used CSS and it should work.

Unline inline style like <div style="color:red">, defining an external CSS with <link> or using <style> makes no difference in specificity or precedence.

<html>
<head>
<link rel="stylesheet" href="../includes/foundation-6.2/css/foundation.css" />

<style>
input::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #ff0000;
    opacity: 1; /* Firefox */
}
input::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #ff0000;
}
input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #ff0000;
   opacity:  1;
}
input::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #ff0000;
   opacity:  1;
}
input:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    #ff0000;
}
input::-ms-input-placeholder { /* Microsoft Edge */
   color:    #ff0000;
}
</style>

    <!--<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>-->
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="js/jquery.validate.min.js"></script>
    <script src="js/additional-methods.js"></script>
</head>
<body>
<form id="frmSearchAddress" method="post">

                    <div class="row">

                    <div class="large-4 columns">

                        <input type="text" placeholder="Street number" name="street_number" required/>
                        <div class="error">No results found.</div>
                    </div>
                    <div class="large-6 columns">
                        <input type="text" placeholder="Street name" name="street_name" required/>
                    </div>
                    <div class="large-2 columns">
                        <input class="" type="submit" value="Search" id="btnSearch">
                    </div>

                    </div>
                </form>
<script src="../includes/foundation-6.2/js/foundation.min.js"></script>
<script>
      $(document).foundation();
</script>
</body>
</html>

Styling placeholder-text with emotion js

You have to apply the inputText style directly to the input:

// Change this
- <p css={inputText}>
-   <input css={inputRound}/>
- </p>

//to this
+ <p>
+   <input css={[inputText, inputRound]}/>
+ </p>

---

Or, alternatively, target child input from the inputText:

const inputText = css`
  & > input::placeholder {
    ...
  }
`

---

Related Topics