Ionicframework，cordova和ios模擬器形成輸入問題

Question

我附加了一個視頻，導致我難以解釋我遇到的問題：

https://vid.me/5Mo

實際上，我是通過自己的形式輸入來設置樣式的，它們的工作方式就像一種魅力，但是當我在ios模擬器上測試fomr時，我這樣做：

1. 集中輸入
2. 觸摸滾動頁面

然后將表單輸入設置為默認背景，就像您在視頻中看到的那樣，它會變成白色背景，而我在CSS中指定此類輸入必須完全沒有背景。

我嘗試使用CSS進行多種方式，例如：

 .input-huge:focus, .input-huge:focus:hover{
  background:none;
}

但它仍然無法正常工作。

任何想法？

這是HTML：

 <ion-view data-title="Submit Shop" ng-controller="Submit">
<ion-content>
<div class="separator50"></div>
<div>
    <input class="row input-huge text-center light" ng-model="newShop.name" type="text" placeholder="Shop Name">
</div>
<div class="separator50"></div>
<div>
    <input class="row input-huge text-center light" ng-model="newShop.city" type="text" placeholder="City">
</div>
<div class="separator50"></div>
<div>
    <input class="row input-huge text-center light" ng-model="newShop.address" type="text" placeholder="Address">
</div>

<div class="separator10"></div>
<div class="separator30"></div>

<div class="row">
    <button ng-click="submit()" class="button button-light button-block font-family-1" ng-class="{'disabled':newShop.processing}">
        <span ng-show="!newShop.processing" class="positive"> Submit</span>
        <span ng-show="newShop.processing"><i class="icon ion-refreshing"></i></span>
    </button>
</div>
</ion-content>
</ion-view>

這是我在CSS中的樣式輸入：

input.input-huge{
  background: none;
  text-align: center;
  font-size: 20px;
  padding-bottom:40px;
  color:#fff;
  border-bottom:1px solid rgba(0,0,0,0.08);
}

感謝建議

Answer 1

賦予background-color: transparent; 或background-color: rgba(0,0,0,.0); 嘗試一下。 讓我知道是否有幫助。

Answer 2

如果不重置-webkit-appearance ，可能無法覆蓋默認的背景屬性（白色）。 嘗試這個

input.input-huge {
    -webkit-appearance: none;
    background: none;
    text-align: center;
    font-size: 20px;
    padding-bottom:40px;
    color:#fff;
    border-bottom:1px solid rgba(0, 0, 0, 0.08);
}
input.input-huge:focus {
    background: none;
}

更新：我創建了一個jsfiddle 。 在iOS Simulator中進行測試可顯示工作結果。

更新2：嘗試使用更多合格的選擇器。

參考