CODEWITHSUNDEEP
cssangularjsionic-framework
Nurdin
Nurdin

Reputation: 23883

Ionic - how to change textfield background colour?

I already set textfield background colour into transparent but not working in Ionic.

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

I already read the Ionic documentation but it's not working. It's still white colour.

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

enter image description here

Upvotes: 3

Views: 24581

Answers (4)

O-9
O-9

Reputation: 1769

In Angular (as your question has an Angular tag), the answer is to use --background

--background: transparent !important; // example

enter image description here

see https://ionicframework.com/docs/api/input#css-custom-properties (select : Angular from the list to see Angular related docs)

Upvotes: 1

TC Roberts
TC Roberts

Reputation: 185

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

Then put the CSS rule on the ion-item element like this:

<ion-item class="label">

Upvotes: -3

Andreas Christiansen
Andreas Christiansen

Reputation: 946

Are you sure your css rule matches the correct element?

Your rule:

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

Matches an element with class item-input, which is a descendant of an element with class item. Perhaps you meant the following?:

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

This rule matches an element with class item and item-input.

Upvotes: 13

mindfreek
mindfreek

Reputation: 704

Maybe a bit of a hack, but could you put the text inside another div and give the div a special background colour.

So, something like this:

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

and then put the text between this div. Hope it helps.

Upvotes: 0

Related Questions