Shadow in input box

[ccaste]

I am seeing a weird inner shadow in some input boxes on iOS only - I think it’s the input boxes that are formatted as numbers only. Here is an example I found online:

I found an apparent solution on this site:

How to remove inner shadow from text inputs on Mobile Safari?

But I don’t know how I would add this line of code or where.

/* Remove inner shadow from inputs on mobile iOS */
textarea, input[type=“text”] {
-webkit-appearance: none;
}

Or is there another solution?

[dambusmedia]

Try adding this to your page’s HTML header (in the page properties):

<style type="text/css">
/* Remove inner shadow from inputs on mobile iOS */
textarea, input[type=“text”] {
-webkit-appearance: none;
}
</style>

[ccaste]

Hey thanks for the recommendation, but it didn’t work. What I really don’t get is how it shows up on some fields and not others.

No shadows here. The price is formatted as currency and is not a required field.

Shadows on the ID - formatted as an integer and is required. The phones are formatted as US Phone not a required field.

Cell phone is formatted as US Phone and is required.

All of the fields are using the same preset style. When I view the page on my Mac - no shadows. But when I view it on iOS devices - shadows.

[dambusmedia]

Ah, ok, sorry I don’t have an iOS device to test on. Actually looking now, it looks like Bubble is already doing this; the default stylesheet has this:

input[type="input"], input[type="text"], input[type="password"], input[type="email"], textarea {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

Given it’s working for some inputs but not others, I’d guess this is a bug. I’d probably put in a bug report.