3

我试图简单地更改文本/密码输入的颜色。不幸的是，能够改变的一切都隐藏在后面，#shadow-root所以我的 CSS 无法触及它。

我试着简单地写：

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

但它当然看不到阴影领域内的任何东西。HTML 的布局如下：

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

控制输入​​颜色的 css 没有使用我可以在其他任何地方更改的变量

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

但我无法覆盖这些。我觉得我需要在根目录下做点什么，但我还不知道 CSS 变量。

Ionic 4 中是否有任何方法可以更改输入文本颜色？

4

2 回答 2

4

做一个快速的谷歌搜索带来了这个网站，它解释了你可以使用::shadow伪元素来设置阴影树中的元素，所以试试这个

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

编辑：

进行更多挖掘后，我发现了这篇SO 帖子，它说您无法使用全局 CSS 为 shadow DOM 中的内容设置样式，因此您需要创建style标签并将其附加到主机。

// 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);
于 2018-08-17T14:41:13.887 回答
0

ionic4 中的本机输入继承了文本颜色，因此您只需将 css 颜色设置为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 */
}

参考离子代码（4.0.0-beta.11）：

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

于 2018-09-22T21:14:41.150 回答