Mobile Safari Text Area Background

Question

A text area that's working well in all other browsers is breaking in mobile Safari. See the image below to see the breakdown in action: The default background is appearing over what I've specified in my stylesheet, and on focus some real weird stuff is happening.

http://gettinderbox.com/blogdesign/i/safarimobile.PNG

Here's the CSS and mark-up:

#search_form, {
    height: 13px;
    width: 188px;
    border: 1px solid #d9d9d9;
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
    background-color: #f6f6f6;
    float: left;
    padding: 5px;
}

#search_form:hover, #search_form:focus {
    border: 1px solid #de6b2c;
    outline: none;
}

<input id="search_form" type="text" name="search_form" title="Search" value="" tabindex="1"  />

Answer 1

maybe you get error because you have a comma after #search_form ?

edit: ok test it on the iphone. The problem is not the comma. The only way to make it work as far I know is to this in your css:

from this

#search_form {
    height: 13px;
    width: 188px;
    border: 1px solid #d9d9d9;
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
    background-color: #f6f6f6;
    float: left;
    padding: 5px;
}

go to this:

#search_form[type="text"] {
    height: 13px;
    width: 188px;
    -webkit-border-radius: 100px;
    float: left;
    padding: 5px;
}

the above code is for safari mobile. Will give the default appearance. I advise you, if it's your first web app you build, try the iWebKit css3 framework for iphone. You will find very good tutorials, example and community.