Фон текстовой области Mobile Safari

Question

Текстовая область, которая хорошо работает во всех других браузерах, ломается в мобильном Safari.См. Изображение ниже, чтобы увидеть разбивку в действии: фон по умолчанию появляется поверх того, что я указал в моей таблице стилей, и в фокусе происходят некоторые странные вещи.

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

Вот CSS и разметка:

#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

возможно, вы получите ошибку, потому что у вас есть запятая после #search_form?

edit: ok протестируйте его на iphone. Проблема не в запятой. Насколько я знаю, единственный способ заставить это работать - это в вашем css:

из этого

#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[type="text"] {
    height: 13px;
    width: 188px;
    -webkit-border-radius: 100px;
    float: left;
    padding: 5px;
}

приведенный выше код предназначен для мобильного сафари. Появится внешний вид по умолчанию. Советую, если вы создаете свое первое веб-приложение, попробуйте iWebKit css3 framework для iphone. Вы найдете очень хорошие учебники, пример и сообщество.