SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,340
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Inconsistent input[type="button"] styling

    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:
    Code:
    <input type='button' class='buttonFormat' value='Enlarge +4' onclick='changeSize4()'>
    CSS:
    Code:
    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;
    }
    Steve Husting

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,214
    Mentioned
    457 Post(s)
    Tagged
    8 Thread(s)
    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. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,380
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    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.

    Code:
    input[type="button"] {
    	font-family:Helvetica, Arial, sans-serif; font-size:13px;
    	float:left;
    	border-radius:5px;
    	-webkit-appearance:none;
    	padding:0 10px;
    	margin:0;
    	height:45px;
    	text-align:center;
    	border:1px solid #ccc;
    	background:#f0f0f0;
    	-webkit-box-shadow:2px 2px 3px #333;
    	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. #4
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,340
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    -webkit-appearance:none; did the trick! Thanks, Paul!!
    Steve Husting


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •