стиль показывает разницу в Chrome и Firefox Safari и iPhone

Question

Я реализую окно поиска для приложения на основе HTML-JavaScript с помощью Chrome:

fiddle

он должен выглядеть следующим образом:

, но когда я развернуть приложение на Iphone, экран выглядит следующим образом:

Я знаю, что разница с WebKit, я думал, что с помощью сафари отладить это будет решение, однако, когда я использую сафари, чтобы открыть его, это выглядит следующим образом:

Просто не знаю, почему на iPhone это похоже. Как улучшить его с помощью функции, которая мне нужна?

Вот HTML:

<div class="form-wrapper"> 
    <input type="text" placeholder="Search here..." required> 
    <button type="submit">Search</button> 
</div> 

CSS:

.form-wrapper { 
    height: 80px; 
    background: #555; 
    color: #FFF; 
    clear: both; 
} 
.form-wrapper input { 
    background-color: #FFF; 
    -moz-box-sizing: border-box; 
    border-radius: 10px; 
    border: 5px solid #E5E4E2; 
    margin: 2px; 
    height: 40px; 
    vertical-align: middle; 
    padding: 20px; 
    margin-top: 15px; 
    width: 85%; 
} 
.form-wrapper button { 
    overflow: visible; 
    position: absolute; 
    float: right; 
    border: 0; 
    padding: 0; 
    cursor: pointer; 
    height: 40px; 
    width: 110px; 
    color: #FFF; 
    text-transform: uppercase; 
    background: red; 
    border-radius: 0 3px 3px 0; 
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3); 
    margin: 20px -116px; 
} 
.form-wrapper button:before { 
    content:''; 
    position: absolute; 
    border-width: 8px 8px 8px 0; 
    border-style: solid solid solid none; 
    border-color: transparent red transparent; 
    top: 12px; 
    left: -6px; 
} 

Answer 1

type="search" вызывает поле, чтобы иметь -webkit-appearance: searchfield на сафари, который вызывает много ваших стилей игнорируются.

Внешний вид none или textfield. Вот a fiddle с none, который, похоже, работает на меня на Safari 6/OSX (нет iDevice для тестирования).