Question

我想更改离子输入的占位符颜色，但无法更改占位符颜色。我有带有浮动标签的离子输入。这是我的解决方法...

<ion-item>
    <ion-label floating>first Name</ion-label>
    <ion-input type="text"></ion-input>
</ion-item>

我尝试过的但不起作用...

1) $text-input-placeholder-color

2）

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: pink;
}
::-moz-placeholder { /* Firefox 19+ */
  color: pink;
}
:-ms-input-placeholder { /* IE 10+ */
  color: pink;
}
:-moz-placeholder { /* Firefox 18- */
  color: pink;
}

3）

::placeholder {
  color: blue;
  font-size: 1.5em;
}

，但没有任何效果。谁能帮我解决这个问题？

Answer 1

这不是占位符。仍然是ion-label

要更改浮动离子标签的样式，

将此添加到您的variable.scss

$label-ios-text-color: blue;
$label-md-text-color: blue;
$label-ios-text-color-focused: blue;
$label-md-text-color-focused: blue;

或编辑您的.scss

.label[floating],
.label[stacked],
.input-has-focus .label[floating] {
    color: blue ;
}

Answer 2

ion-item.item-has-focus > ion-label { color: red ; }

Answer 3

只需为该问题提供一个更简单的解决方案。如果您有多个设置属性的规则，即color: red;，则CSS将应用具有更多“优先级”的规则。没有一个选择器具有比关键字!important更高的优先级。

ion-label {
   color: your-awesome-color-here !important;
}

带有浮动标签占位符颜色的离子输入在离子中不变

3 个答案: