html - 输入字段在 Safari 中呈现不佳

Question

我一直在检查各种浏览器的输入字段。由于某种原因，它在 Safari 中的渲染效果不佳。它忽略了分配给自己的填充。 你知道由此引起的任何问题吗？ 下面是表单及其样式。 谢谢

 <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

一些浏览器不支持输入类型搜索，但 Safari 应该支持它，也许可以尝试使用输入类型文本，因为它的行为与搜索相同。