Remove iOS input shadow
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:
input[type=text] {
/* Remove First */
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
/* Then Style */
border-radius: 15px;
border: 1px dashed #BBB;
padding: 10px;
line-height: 20px;
text-align: center;
background: transparent;
outline: none;
}
Helpful Links:
You can learn more about appearance
here:
http://css-tricks.com/almanac/properties/a/appearance/
If you'd like to learn more about CSS attribute selectors, you can find a very informative article here:
http://css-tricks.com/attribute-selectors/
Remove textarea inner shadow on Mobile Safari (iPhone)
By adding this css style:
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
As per https://developer.mozilla.org/en-US/docs/Web/CSS/appearance
Remove selection gray shadow from html input on iOS
It's as simple as setting the following CSS rule.
div {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
This makes the applied shadow transparent so it seems like it's gone.
Edit: Here's a demo link.
remove inner shadow of text input
border-style:solid;
will override the inset
style. Which is what you asked.
border:none
will remove the border all together.
border-width:1px
will set it up to be kind of like before the background change.
border:1px solid #cccccc
is more specific and applies all three, width, style and color.
Example: https://jsbin.com/quleh/2/edit?html,output
Turn off iPhone/Safari input element rounding
On iOS 5 and later:
input {
border-radius: 0;
}
input[type="search"] {
-webkit-appearance: none;
}
If you must only remove the rounded corners on iOS or otherwise for some reason cannot normalize rounded corners across platforms, use input { -webkit-border-radius: 0; }
property instead, which is still supported. Of course do note that Apple can choose to drop support for the prefixed property at any time, but considering their other platform-specific CSS features chances are they'll keep it around.
On legacy versions you had to set -webkit-appearance: none
instead:
input {
-webkit-appearance: none;
}
iPhone iOS will not display box-shadow properly
Try adding -webkit-appearance: none;
iOS tends to mess up forms.
Related Topics
Uiactivityviewcontroller Crashing on iOS 8 Ipads
How to Load Storyboard Programmatically from Class
Change Uitableview Height Dynamically
How to Parse Json Response from Alamofire API in Swift
How to Create Local Notifications
Xcode 7 Error: "Missing iOS Distribution Signing Identity For ..."
What Kind of Leaks Does Automatic Reference Counting in Objective-C Not Prevent or Minimize
Resizing Uitableview to Fit Content
Execute Action When Back Bar Button of Uinavigationcontroller Is Pressed
Reloaddata() of Uitableview With Dynamic Cell Heights Causes Jumpy Scrolling
How to Programmatically Sense the Iphone Mute Switch
Do Something Every X Minutes in Swift
Swift Saving and Retrieving Custom Object from Userdefaults
How to Convert from Degrees to Radians