如何覆盖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输入样式

回答

相关问题