Ionicframework，cordova和ios模拟器形成输入问题

Question

I attach a video cause its hard for me to explain the problem i'm getting:

https://vid.me/5Mo

Actually i styled by my own the form inputs and they works like a charm but when i test the fomr on ios simulator i do this:

1. focus the input
2. touch scroll the page

then the form input is rsetted to the default background as you can see in the video it gets a white background, while i specified in css that such inputs has to be without background at all.

I tryed in many ways using the css like:

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

but it still wont work.

Any idea?

this is the 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>

and this is my styled inputs in 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);
}

thanks in advice

Answer 1

Give background-color: transparent; or background-color: rgba(0,0,0,.0); a try. Let me know if that helps.

Answer 2

It is possible that you can't overwrite the default background property (white) without resetting -webkit-appearance . Try this

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;
}

Update: I created a jsfiddle . Testing in iOS Simulator shows working results.

Update 2: Tried using more qualified selectors.

Reference