Inconsistent input[type="button"] styling

HTML & CSS
1

Is there a reason why the follow stylizes a button so it has rounded corners in an Android device, but shows a lozenge button shape in the iPhone?

HTML:

<input type='button' class='buttonFormat' value='Enlarge +4' onclick='changeSize4()'>

CSS:

input[type="button"] {
font-family:Helvetica, Arial, sans-serif; font-size:13px;
float:left;
border-radius: 5px;padding:0;margin:0;
height:45px;
text-align:center;
}
2

With a height of 45px and corner rounding of 5px, I’d be expecting the iPhone rendering. Which were you expecting/wanting? If the fully round ends, try increasing the border radius to 23px or more.

3

Hi,

My iphone emulator shows no change to the button with border-radius so you will need to remove all styling and style it from scratch. You can use the prefix -webkit-appearance: none to remove the styling and then restyle it as you want it.

e.g.


input[type="button"] {
	font-family:Helvetica, Arial, sans-serif; font-size:13px;
	float:left;
	border-radius:5px;
[B]	-webkit-appearance:none;[/B]
	padding:0 10px;
	margin:0;
	height:45px;
	text-align:center;
	border:1px solid #ccc;
	background:#f0f0f0;
	[B]-webkit-box-shadow:2px 2px 3px #333;[/B]
	box-shadow:2px 2px 3px #333;
}

Another anomaly (in the emulator anyway) is that box-shadow on the input only works if you use the prefix -webkit (the emulator is running ios 4.3 and ios5 doesn’t need the prefix).

4

-webkit-appearance:none; did the trick! Thanks, Paul!!