Rounded Corners on Form Input Fields
Styles For Rounded Input Fields
.
To create a Safari input field with rounded corners, use the style “-webkit-border-radius”. Here’s an example:
<style type=”text/css”>
.iInput {
font-family: Verdana; font-size: 40px;
color: black;
-webkit-border-radius:25px;
background:#F2FFE1;}
</style>
The style is then used in the class property of an input field.
<input type=”text” name=”person_name” size=”20″ class=”iInput” value=”" />
The resulting input field looks like this…..
Tony said,
January 2, 2008 @ 5:29 am
This works okay on IPhone’s Safari browser
IPhone Cafe » Blog Archive » CiUI and iPhone WebApps said,
April 15, 2008 @ 7:21 pm
[…] Earlier posts on iPhone Cafe described CSS styles to create Rounded Corners on Form Input Fields and iPhone Drop Down Menus with Apple’s iPhone Safari look and feel. […]