Styling Part of The Text in The Placeholder

.placeholder-wrap {    display: inline-block;    position: relative;    background: #FFF;    overflow: hidden;}.placeholder-wrap .placeholder {    position: absolute;    top: 50%;    left: 5px;    color: #888;    margin-top: -.5em;    line-height: 1em;    z-index: 9;    overflow: hidden;    text-overflow: ellipsis;    white-space: nowrap;    width: 100%;}.placeholder-wrap input {    background-color: transparent;    border: 1px #999 solid;    padding: 4px 6px;    position: relative;    z-index: 10;}.placeholder-wrap input:focus + .placeholder,.placeholder-wrap input[required]:valid + .placeholder,.placeholder-wrap input.not-empty + .placeholder {    display: none;}

input {width: 300px;}.important {color: brown;}

<p>CSS fix</p>
<div class="placeholder-wrap">    <input type="text" name="userName" required />    <span class="placeholder">        This is a <b class="important">placeholder</b> long text goes here    </span></div>
<p>Javascript fix</p>
<div class="placeholder-wrap">    <input type="text" name="userName"            onchange="this.className = this.value              ? this.className + ' not-empty'             : this.className.replace(/\bnot-empty\b/, '')"     />    <span class="placeholder">        This is a <b class="important">placeholder</b> long text goes here    </span></div>

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.

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

Change a part of the text placeholders color

There could be a solution via mix-blend-mode.

https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode

http://caniuse.com/#search=mix-blend-mode

It will not be avalaible everywhere and requires some tuning.

example:

label {  display: inline-block;  background: linear-gradient(to right, red 8em, blue 5em);  border: inset;/* border here instead input */  font-family: monospace;/* less surprise about length of text at screen */}input {  font-weight: bold;  width: 25em;  border: none;  display: block;  box-shadow: inset 0 0 0 2em white;/* covers the background, needed for the blending */}input:invalid {/* color part of text only when placeholder is shown */  mix-blend-mode: screen;}

<label>  <input placeholder="New Password (leave blank to leave unchanged)" required /></label>

.input-group input{
  padding:10px 20px;
}
.search-engine::placeholder{

}

<div class="input-group">
   <input type="text" class="form-control search-engine" placeholder="Search this blog">
</div>