Div и вход не выровнены правильно в Safari

Question

У вас возникли проблемы с выравниванием div и ввода рядом друг с другом для создания этого классического ввода с помощью значка. Однако, когда я использую Safari/Mac и Safari/IOS, это будет выглядеть так:

Broken in Safari

... и я просто не могу получить мою голову вокруг него! Это нормально в Chrome, и я попытался сыграть с поплавками, по вертикали (не знаю, насколько это уместно), но все равно ничего.

HTML:

<div class="input-with-icon"> 
    <div class="icon">X</div> 
    <div class="input"><input type="text" placeholder="Start typing to find a customer..."></div> 
</div> 

CSS:

.input-with-icon .icon { 
    float: left; 
    background-color: #fff; 
    border-top: 1px solid #dcdcdc; 
    border-bottom: 1px solid #dcdcdc; 
    border-left: 1px solid #dcdcdc; 
    padding: 13px 0 14px 10px; 
    color: grey; 
    font-size: 14px; 
    border-radius: 5px 0 0 5px; 
} 

.input-with-icon .input { 
    overflow: hidden; 
} 

.input-with-icon input[type="text"]{ 
    -webkit-appearance: none; 
    width: 100%; 
    outline: none; 
    font-size: 16px; 
    padding: 13px; 
    font-family: 'Roboto Light', sans-serif; 
    border-top: 1px solid #dcdcdc; 
    border-right: 1px solid #dcdcdc; 
    border-bottom: 1px solid #dcdcdc; 
    border-left: 0; 
    border-radius: 0 5px 5px 0; 
} 

Вот скрипку, если это поможет вам, ребята с моим кодом - по какой-то причине правая граница не хочет работать на скрипке, но не суетился по поводу этого бита, как это прекрасно во всем остальном.

https://jsfiddle.net/r08gxre3/1/

Любая помощь будет высоко ценится, спасибо, ребята! :)

Answer 1

Просто добавьте margin: 0px; к вашему элементу ввода. Это должно быть так!

Как:

.input-with-icon input[type="text"]{ 
 
    -webkit-appearance: none; 
 
    width: 100%; 
 
    outline: none; 
 
    font-size: 16px; 
 
    padding: 13px; 
 
    font-family: 'Roboto Light', sans-serif; 
 
    border-top: 1px solid #dcdcdc; 
 
    border-right: 1px solid #dcdcdc; 
 
    border-bottom: 1px solid #dcdcdc; 
 
    border-left: 0; 
 
    border-radius: 0 5px 5px 0; 
 
    margin: 0px; 
 
    /* or just margin-top: 0px; */ 
 
}

Fiddle:https://jsfiddle.net/bbdkzuyn/