輸入字段在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中無法正常顯示

回答

相關問題