How to remove styles on Form Input Fields

Community resources Product feedback
1

Hi,

I have notice that the default css for the input style boxes have 2 things, 1px border and white background, no problem with that.
The problem is when i remove the borders and put the background transparent. If you notice in the picture, the second box has a small shadow, but the the shadow proprety does not show anything.

To fix this, i create an inner shadow and click on “the eye”.

If webflow shoes the borders and the white background, the inner shadow should be the same.

Well, like i say, it´s a tiny “bug”. Keep up with th good work.

Rui

2

Thanks for pointing this out @Rui_Almeida!

We’ve been adding more and more “grey” values that are being inherited from our Webflow.css or Base.css files in the designer. It’s definitely helpful to know what the “base” style has. Border and background image have been straightforward, but Box shadow is a bit tricky. We’ll try to add it soon! :slight_smile:

3

Is there an solution for this question?

4

i want to remove this inner shadow at mobile devices.
is there a way to do this?

2048×909 90.6 KB

5

“You’ll need to use -webkit-appearance: none; to override the default IOS styles. However, selecting just the input tag in CSS will not override the default IOS styles, because IOS adds it’s styles by using an attribute selector input[type=text]. Therefore your CSS will need to use an attribute selector to override the default IOS CSS styles that have been pre-set.”

Try this custom code:

input[type=text] {   
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

Source: css - Remove iOS input shadow - Stack Overflow

4 Likes
6

OK. Thanks. I’ll try it. :smile: