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

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 将应用具有更多“优先级”的规则。 None 个选择器的优先级高于关键字 !important.

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

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

ion-input with floating label placeholder colour is not changing in ionic

placeholder

ionic-framework

ionic2

ionic3