离子 - 如何更改文本字段背景颜色？

Question

我已经将文本字段背景颜色设置为透明但不在Ionic中工作。

.item .item-input {
    background-color: transparent;
}

我已经阅读过离子文档，但它没有用。它仍然是白色。

http://ionicframework.com/docs/components/#forms-inline-labels

请指教。谢谢。

Answer 1

你确定你的css规则与正确的元素匹配吗？

你的规则：

.item .item-input {
    background-color: transparent;
}

使用类item-input匹配元素，该类是具有类项的元素的后代。也许你的意思是以下几点？：

.item.item-input {
    background-color: transparent;
}

此规则匹配具有类项和项目输入的元素。

Answer 2

在Angular中（因为您的问题带有Angular标签），答案是使用-background

--background: transparent !important; // example

请参见https://ionicframework.com/docs/api/input#css-custom-properties（从列表中选择：Angular以查看与Angular相关的文档）

Answer 3

也许有点像黑客，但你可以把文本放在另一个div中，并给div一个特殊的背景颜色。

所以，像这样：

.text {
background-colour: red; // or colour: red; I don't know
}

然后将文本放在这个div之间。希望能帮助到你。

Answer 4

.label {
background-color: reba(255, 255, 255, 0.0);
}

然后将CSS规则放在ion-item元素上，如下所示：

<ion-item class="label">