I attach a video cause its hard for me to explain the problem i'm getting:
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:
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
Give background-color: transparent;
or background-color: rgba(0,0,0,.0);
a try. Let me know if that helps.
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.