2016-10-01 53 views
0

当焦点未聚焦时,是否可以改变md-input文字颜色和线条颜色?例如,我在黑暗的背景上使用md-input,因此会喜欢白色字体和下划线(见下文)。注意我希望保留其他表单的默认颜色,这样理想的解决方案可以让我直接设置特定控件的样式,或者在输入上放置不同的主题。角度材质2 md-输入改变非焦点文字和下线颜色

Dark Background and Md Input

回答

2

我已经解决了类似的问题与下面的方法。

HTML

<md-input 
    (focus)="searhFocus()" 
    (blur)="searchUnfocus()" 
    [ngClass]="{'searchbar-unfocus': !searchFocused, 'searchbar-focus': searchFocused}"> 
</md-input> 

component.ts

private searchFocused: boolean = false; 
    searhFocus() { 
    this.searchFocused = true; 
    } 
    searchUnfocus() { 
    this.searchFocused = false; 
    } 

和CSS

.searchbar-focus{ 
    background: white; 
    color: black; 
} 

.searchbar-unfocus{ 
    background: rgba(255,255,255,0.16); 
    color: rgba(255,255,255,0.38); 
} 

为线,您可以使用:host >>> .md-input-underline{...}