Remove default input styles

Have been trying to remove the default iOS input styles from my site. Looks fine on desktop but looks like image on mobile. I’m assuming it’s an iOS default.

So far I tried:

  1. Added a border shadow to override the default
  2. Adding a bit for css in my head element
<style>
input[type=text] {   
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
</style>

Not sure what else to do currently, would love some feedback.

Thanks!

Here is my site Read-Only: olliebar.webflow.io
(how to share your site Read-Only link)

Take a look at these pages.
https://wiki.csswg.org/spec/css4-ui#dropped-css3-features
https://www.w3.org/TR/css-ui-4/#propdef-appearance

BTW: I think it is a BAD IDEA to change what users have experienced as the default, on a device, for purely design purposes. There is a reason Webkit sets default styling - consistency.

Awesome, I appreciate the response.

I’ve found overriding default input styles very common with most platforms and products. I agree it can be a bad idea, but context matters. Depending on the users current expectations - it could be an issue (e.g product or services targeted to baby boomers would need more design context than most). My audience is fairly young and are used to such styles.

Hello @masen

Did you ever figure out how to do this? I can’t figure it out. Thanks!

Ah, Spoke too soon. This is what worked for me: In the site custom code Head section:

<style>
     .class-name {
     -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
     }
</style>