离子4改变输入颜色答案

【问题标题】：Ionic 4 change input color离子4改变输入颜色
【发布时间】：2019-01-24 14:14:26
【问题描述】：

我正在尝试简单地更改文本/密码输入的颜色。不幸的是，所有能够改变的东西都隐藏在#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 中有什么方法可以改变输入文本的颜色吗？？

【问题讨论】：

你不能只将颜色样式应用到ion-input本身或上面的一个类吗？
@JosephWebber 我已经尝试过了，但是 ion-input 不会将其样式沿链发送到#shadow-root

标签： css ionic-framework shadow-dom css-variables ionic4

【解决方案1】：

在 Google 上进行快速搜索会弹出 this 站点，该站点说明您可以使用 ::shadow 伪元素来设置阴影树中的元素样式，所以试试这个

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

编辑：

进一步挖掘后，我发现 this 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);

【讨论】：

:shadow 已弃用
谢谢你的回答，很遗憾这不起作用。
@JosephWebber，感谢您提供更新的答案。我会玩这个，并在我有能力的时候报告。我希望避免使用任何 javascript，但如果这是唯一的方法......

【解决方案2】：

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

【讨论】：