CODEWITHSUNDEEP
cssionic-frameworkshadow-domcss-variablesionic4
ntgCleaner
ntgCleaner

Reputation: 5985

Ionic 4 change input color

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??

Upvotes: 4

Views: 11485

Answers (2)

vlapo21
vlapo21

Reputation: 344

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

Upvotes: 1

Joseph Webber
Joseph Webber

Reputation: 2173

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

Upvotes: 4

Related Questions