iOS Forces Rounded Corners and Glare on Inputs

iOS forces rounded corners and glare on inputs

The version I had working is:

input {
    -webkit-appearance: none;
}

In some webkit browser versions, you may also be faced with the border-radius still being in place. Reset with the following:

input {
    -webkit-border-radius:0; 
    border-radius:0;
}

This can be extended to apply to all webkit styled form components such as input, select, button or textarea.

In reference to the original question, you wouldn't use the value 'none' when clearing any unit based css element.
Also be aware that this hides checkboxes in Chrome, so perhaps use something like input[type=text] or input[type=submit], input[type=text] or instead filter out those that don't use rounded corner settings such as input:not([type=checkbox]), input:not([type=radio]).

Difficulty styling input box for iPhone and iPad

It sounds like a mobile Safari "issue". Try adding these CSS rules to the input field:

-webkit-appearance: none;
-webkit-border-radius: 0;
border-radius: 0;

Styling Form Inputs on iOS

There are some default styles or something like that on iOS.

I believe you can get rid of those by using

-webkit-appearance:none;

How to set rounded corners and dont clip subview

Do this:

UIBezierPath *path = "create a path representing ur desired shape, along with the arrow"
CAShapeLayer *shape = [CAShapeLayer layer];
shape.path = path.CGPath;

button.layer.mask = shape;

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;
}

Add rounded corners to all UIImageViews

You could use a category for UIImage which is an alternate way to subclass a Class and sometimes easier for just small changes.

e.g add a method that returns a UIImage with the rounded corner attributes set.

+(UIImage *)imageWithContentsOfFile:(NSString *)file cornerRadius:(NSInteger)... 

more info on Objective-c categories can be found http://macdevelopertips.com/objective-c/objective-c-categories.html

Why the input box is showing so different on Ipad but not on chrome

Try to use -webkit-appearance to get rid of the default styles.

Check this issue:
iOS forces rounded corners and glare on inputs
https://stackoverflow.com/a/14758383

---

Related Topics