如何覆蓋ngModel輸入樣式

在我的Ionic應用程序中，我使用[(ngModel)]綁定並在我的課程中傳遞輸入值。如何覆蓋ngModel輸入樣式

<ion-item> 
     <ion-label color="primary" floating>flow [m <sup>3</sup> /h]</ion-label> 
     <ion-input type="number" [(ngModel)]="flow" (change)="calculate()"></ion-input> 
</ion-item>

問題是它適用於我不想輸入的樣式。對於在底部例如綠色邊框，你可以看到here

所以，我試圖將其覆蓋在scss文件：

page-fan-choice { 
    .ng-valid * { 
     border-bottom-color: #dedede; 
     box-shadow: none; 
    } 
}

，但它並沒有幫助。我檢查了控制檯，我發現層級樹中的默認樣式比我的高。見下：

.item-md.item-input.ng-valid.input-has-value:not(.input-has-focus) .item-inner { 
    border-bottom-color: #32db64; 
    box-shadow: inset 0 -1px 0 0 #32db64; 
} 
page-fan-choice .ng-valid * { 
    border-bottom-color: #dedede; 
    box-shadow: none;

我也試過使用!important。我幫助過，但它也使我想要保留的輸入的默認離子造型更加複雜，例如，單擊它時藍色底邊框。所以底部邊界始終保持灰色(#dedede)。

我怎麼能覆蓋，而無需修改默認離子造型這ngModel造型？

來源

2017-05-05 Arkej

你可以爲它創建一個plunker？ – Aravind

檢查此鏈接http://stackoverflow.com/questions/41360804/how-to-remove-default-color-in-input-type – blecaf

如果這是你有一個很難重寫CSS規則：

.item-md.item-input.ng-valid.input-具有價值：不是（。輸入，具有-focus）.item-inner {}

讓我們假設你試圖設計的div有另一個類'foo'，將它分開。只需更改該規則即可在組件中添加額外的類。現在它更具體。

.foo.item-md.item-input.ng-valid.input-has-value:not(.input-has-focus) .item-inner {}

來源

2017-05-05 19:26:34 chairmanmow

您需要使樣式的特異性高於要覆蓋的樣式。

div#test span { color: green } 
div span { color: blue } 
span { color: red }

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

來源

2017-05-05 19:30:23 mrdeleon

如何覆蓋ngModel輸入樣式

回答

相關問題