输入字段在Safari中无法正常显示

我一直在检查各种浏览器的输入字段。由于某些原因，它只能在Safari中无法正常渲染。它忽略了分配给它自己的填充。你知道有什么问题吗？下面是表单和它的样式。感谢输入字段在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; 
    } 

    } 

}

来源

2016-02-17 Beppe

寻求代码帮助的问题必须包含在问题本身**中重现**所需的最短代码。请参阅[**如何创建最小，完整和可验证的示例**]（http://stackoverflow.com/help/mcve） –

输入类型的搜索是不是在几个浏览器的支持，但它应该在Safari浏览器的支持，使用输入类型的文本，因为它的行为与搜索也许尝试。

来源

2016-02-17 21:01:22

输入字段在Safari中无法正常显示

回答

相关问题