Try this and see what Mobile Safari displays.
input {
-webkit-border-radius: 20px;
-webkit-appearance: none;
}
BoltClock
2010-06-10 17:11:49
+1
A:
Been there, done that. Nothing doing.
abrahamvegh
2010-06-10 17:16:56
+2
A:
Consensus from around the web is that this is a bug in WebKit for iOS. Don't use border-radius on text inputs on the iPhone.
abrahamvegh
2010-06-10 21:30:32
A:
Have you considered wrapping the textfield with a span/div/other container with a border-radius?
<style>
body { background-color: #000; }
.inputWrapper { -webkit-border-radius: 20px; }
</style>
...
<body>
<div class="inputWrapper"><input type="text" value="text" /></div>
</body>
Wayne Hartman
2010-06-11 02:55:16
A:
I'm not seeing this problem in my site, and I'm using the -webkit-border-radius of 8px with a background image that is assigned in the body style. I also have this style for my input box:
-webkit-box-shadow: 0px 5px 10px rgba(0,0,0,0.5);
Although the rounded corners are showing up fine, the box shadow does not display at all on mobile safari, even though it displays fine on desktop safari. Maybe having the -webkit-box-shadow style is allowing the radius designator to work?? You might give it a try because it's working for me.
You could also try using the individual border styles of:
-webkit-border-top-left-radius -webkit-border-top-right-radius -webkit-border-bottom-left-radius -webkit-border-bottom-right-radius
When I used just -webkit-border-radius for a select box, it did not render right in mobile safari (again the desktop version was fine). When I changed to using the individual style settings, then it worked fine.
imagimotion
2010-08-10 23:34:03