Ionic中如何修改浮动输入框标签的颜色？

我想要修改输入框的浮动标签颜色。设置了--border-color: #222428;后仅改变了边框颜色，现在需要修改悬浮时浮动显示的“Email”和“Password”文字的颜色。

初始代码：

<ion-input style="margin: 15px; width: auto; --border-color: #222428;" label="Email" label-placement="floating" fill="outline" placeholder="Your Email address"></ion-input>
<ion-input style="margin: 15px; width: auto; --border-color: #222428;" type="password" label="Password" label-placement="floating" fill="outline" placeholder="Your Password"></ion-input>

尝试过添加color:black样式，但“Password”文字颜色未改变：

<ion-input style="margin: 15px; width: auto; --border-color: #222428; color:black" label="Email" label-placement="floating" fill="outline" placeholder="Your Email address"></ion-input>
<ion-input style="margin: 15px; width: auto; --border-color: #222428; color:black" type="password" label="Password" label-placement="floating" fill="outline" placeholder="Your Password"></ion-input>

解决方法 #

Ionic的浮动标签样式需要通过组件专属CSS变量控制，直接添加color属性无法覆盖内部样式，使用以下变量即可：

• --label-color：未激活状态下的标签颜色
• --label-color-focused：聚焦/悬浮时的标签颜色

修改后的代码示例：

<ion-input style="margin: 15px; width: auto; --border-color: #222428; --label-color-focused: black;" label="Email" label-placement="floating" fill="outline" placeholder="Your Email address"></ion-input>
<ion-input style="margin: 15px; width: auto; --border-color: #222428; --label-color-focused: black;" type="password" label="Password" label-placement="floating" fill="outline" placeholder="Your Password"></ion-input>

如果需要统一控制所有同类型输入框，建议在全局CSS或组件样式中添加：

ion-input[fill="outline"][label-placement="floating"] {
  --border-color: #222428;
  --label-color-focused: black;
}

这样就能确保Email和Password的浮动标签在悬浮/聚焦时都显示黑色了。

内容的提问来源于stack exchange，提问作者Soufiane Akif