Input field doesn't render well in Safari - html

Question

I've been checking an input field across various browsers. It only doesn't render well in Safari for some reason. It's ignoring the padding assigned to itself.
Do you know any issue caused by that?
Below there is the form and its styling.
Thanks
<form class="search" name="searchCity" ng-submit="search(city)">
<input class="search__field" name="searchField" type="search" title="Please enter city name" required placeholder="City to find" ng-model="city" ng-pattern ="regex"/>
<button ng-disabled="searchCity.$invalid" class="search__button" type="submit"><img src="./img/search_icon.gif" alt="Search city" /></button>
</form>
//Form elements style global
form{
font-size:1.2em;
width:100%;
textarea{
display: block;
margin: 20px 0;
width: 100%;
height: 200px;
padding: 10px;
}
select{
padding: 13px;
-webkit-appearance: menulist-button;
height: 45px;
}
input{
&[type="checkbox"], &[type="radio"]{
display: none;
+ label{
position: relative;
cursor: pointer;
vertical-align: middle;
}
&:before{
content: "";
border: 1px solid gray;
background-color: white;
border-radius: 50%;
width: 17px;
height: 17px;
display: inline-block;
vertical-align: middle;
margin-right: 5px;
}
}
&[type="checkbox"]{
+ label{
&:before{
border-radius: 0;
margin-right: 10px;
}
}
}
&:checked{
+ label:after{
content: "";
background-color: green;
border-radius: 50%;
width: 9px;
height: 9px;
position: absolute;
left: 5px;
top: 5px;
}
}
&[type="text"],
&[type="search"],
&[type="password"],
&[type="number"]{
padding: 13px;
border: solid 1px #a4a4a4;
}
}
}

Answer 1

Input type search isn't supported in a few browsers but it should be supported in Safari, maybe try using input type text since it behaves the same as search.