CODEWITHSUNDEEP
ioscssmobile
Maartje
Maartje

Reputation: 688

white input background on iphone, can't get it away

Is anyone familiar with a white background on an input on iPhone ? I am trying to make an input without any styling, so with a transparent background. Everywhere it works fine except on the iphone.

What I've tried already is

background: none;
background-color: none; or background-color: transparent; (tried both)
da
-webkit-appearance:none;

none seems to work. Anyone knows what the problem might be?

enter image description here

Upvotes: 0

Views: 1959

Answers (3)

elvirus
elvirus

Reputation: 123

I tried it on an iPhone 6 with iOS 10, real device and simulator, using

<input style="background: transparent; border: none;" type="text" />

There doesn't seem to be a problem with that. The input is fully transparent.

Please check the inspector to see if any other style declaration is overwriting yours. Do this in the "computed styles" section of the inspector and check the background or background-color property. It will tell you which declaration is used to render the element. You can jump directly into this declaration by using the little arrow, see the screenshot from chrome inspector

chrome inspector screenshot

Try to avoid using !important because this will mess up your code and it is not a good practice. Use better qualified selectors instead.

Upvotes: 2

Maartje
Maartje

Reputation: 688

The solution in this case was to put

all: revert !important;

before any other input styling. It probably got overwritten by something in the framework I use.

Upvotes: 1

Robert Williams
Robert Williams

Reputation: 1410

Use background: transparent!important; or apply id to the input field like:

input type="text" id="search">

Css:

input#search{
  background: transparent;
}

Upvotes: 1

Related Questions