Question

我正在使用Ionic 2 rc0开发一个应用程序，并且在整个应用程序中有几个仍需要样式的输入字段。

<!doctype html>
<html><body>
<div id="alpha"></div>
<script>
    const alpha = document.querySelector('#alpha');
    console.log(alpha);
</script>
</body></html>

离子2输入api http://ionicframework.com/docs/v2/api/components/input/Input/

具体来说，我需要在活动时更改占位符文本的样式和底部边框。通过API，并提供了SASS变量覆盖，我无法弄清楚如何覆盖输入字段的边框和占位符文本的继承样式。

我希望避免使用'！important'以及影响每个输入所在的特定页面的这些更改（我不希望更改为'全局'）。

Answer 1

使用Ionic2 RC4，您必须在app.scss文件中添加以下行：

.text-input::-moz-placeholder {
  color: white;
}

.text-input:-ms-input-placeholder {
  color: white;
}

.text-input::-webkit-input-placeholder {
  text-indent: 0;
  color: white;
}

Answer 2

只需执行::占位符选择器，即

<ion-input placeholder="enter placeholder here..." class="custom-input" type="text"></ion-input>

并在css中称之为

ion-input {
  &.custom-input {
    font-size: 20px; //sets text font size
    ::placeholder {
      font-size: 12px; //sets placeholder font size
    }
  }
}

Answer 3

Ionic 2提供sass variable overrides你可以用来轻松改变风格。

主题/ variables.scss

$text-input-placeholder-color:(#000);

Answer 4

这对我有用：D

ionic cli 4.1.1

example.scss

ion-input {
    ::placeholder{
        color:white !important;
    }
}

example.html

<ion-input placeholder="Username" type="text"></ion-input>

Answer 5

对于Ionic2.0，内部文件app.ms.css我尝试在 .text-input :: - moz-placeholder 的第6069行附近设置样式并且它有效。 RC0可以尝试相同

Answer 6

对于文档custom-properties中的Ionic 4。

apiClient

get only

<ion-input class="custom-class"></ion-input>

Answer 7

万一有人需要帮助：

ion-input {
            color: #000000ad !important;
            font-size: 16pt;
            --placeholder-color: black !important;
            --placeholder-opacity: 100%;
          }

不透明度值使它看起来就像输入文本一样。

Ionic 2占位符文本样式

7 个答案: