Ionic 4 change input color

Question

I am trying to simply change the color of a text/password input. Unfortunately, everything to be able to change is hidden behind the #shadow-root so my CSS can't touch it.

I've tried to simply write:

input {
  color:var(--ion-color-primary) !important;
}

but of course it does not see anything inside the shadow realm. the HTML is laid out like so:

<ion-input _ngcontent-c0="" class="form__group__item--input ng-untouched ng-pristine ng-invalid hydrated ion-untouched ion-pristine ion-invalid has-focus" formcontrolname="email" type="text" ng-reflect-name="email" ng-reflect-type="text">
    #shadow-root
        <style></style
        <input> // Need to edit this one
        <slot></slot?
    <input type="hidden" class="aux-input" name="ion-input-0" value="">
</ion-input>

The css that's controlling the color of the input is not using a variable that I'm able to change anywhere else

input, textarea, select, button {
    text-rendering: auto;
    color: initial;
    letter-spacing: normal;
    word-spacing: normal;
    text-transform: none;
    text-indent: 0px;
    text-shadow: none;
    display: inline-block;
    text-align: start;
    margin: 0em;
    font: 400 11px system-ui;
}

but I'm not able to override those. I feel like I need to do something in the root, but I don't know CSS variables yet.

is there any way in Ionic 4 to change the input text color??

Can you not just apply the color style to `ion-input` itself or a class on it? — Joseph Webber, Aug 17 '18 at 14:16
@JosephWebber I have tried that, but ion-input does not send its styles down the chain into the `#shadow-root` — ntgCleaner, Aug 17 '18 at 14:27

Joseph Webber · Answer 1 · 2018-08-17T16:23:11.927

4

Doing a quick Google search brought up this site which explains you can use the ::shadow pseudo-element to style elements within shadow trees, so try this

ion-input::shadow input {
  color: var(--ion-color-primary);
}

Edit:

Doing some more digging around I found this SO post which says you can't style things inside the shadow DOM with global CSS, so you need to instead create and append a style tag to the host.

// host is the element that holds the shadow root:
var style = document.createElement('style');
style.innerHTML = '.the-class-name { property-name: my-value; }';
host.shadowRoot.appendChild(style);

edited Aug 17 '18 at 16:23

answered Aug 17 '18 at 14:41

Joseph Webber

2,010
1
19
38

1

::shadow is deprecated – Supersharp Aug 17 '18 at 15:24
Thank you for the answer, Unfortunately this does not work. – ntgCleaner Aug 17 '18 at 15:30
@JosephWebber, Thank you for the updated answer. I'm going to play with this and report back when I'm able to. I was hoping to avoid any javascript, but if that's the only way... – ntgCleaner Aug 17 '18 at 19:35

score 1 · Answer 2 · answered Sep 22 '18 at 21:14

Native input in ionic4 inherits text color so you just have to set css color of ion-input.

HTML:

<ion-input placeholder="Muhahaaaa"></ion-input>

CSS:

ion-input {
    --placeholder-color: green;     /* placeholder text color */
    color: var(--ion-color-primary; /* input text color to primary */
}

Reference to ionic code (4.0.0-beta.11):

https://github.com/ionic-team/ionic/blob/master/core/src/components/input/input.scss#L43

Ionic 4 change input color

2 Answers2