Site Loader

Remove input field and textarea inner shadow in iOS

How to Remove input field text and text-area inner shadow in iOS:

Apple/iOS products are great, but the mobile iOS is adding extra styles to form elements.

This can be quite annoying if you want to get your design to look exactly the same in most browsers/hybrid apps.

Here is how you can remove inner shadow from text input fields and textareas by simply applying the CSS to your input text field and textarea.


/* Remove inner shadow from input type="text" and textarea on mobile iOS */

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

What is CSS Box Shadow?

CSS Box Shadow. Used in casting shadows off block-level elements (like divs). … The vertical offset of the shadow, a negative one means the box-shadow will be above the box, a positive one means the shadow will be below the box.


inner shadow in iOS

Prasad

UI

I am a UI Designer with a passion for designing clean and simple user interfaces.
I do smart UI design, My career path is simple "Challenges are always interesting as they keep me moving, but learning from them and implementing is my motto"
Understanding good UI design can help you create the more user friendly portals.

UI

I am a User Interface Developer with experience in coding XHTML, HTML, HTML5, CSS, CSS3, Bootstrap UI Framework, SEO, jQuery, JavaScript, PHP and MySQL.
I focus on writing clean and efficient code.

Leave a Reply

Your email address will not be published. Required fields are marked *

Time limit is exhausted. Please reload CAPTCHA.