Блог

Возможно ли изменить цвет текста md-ввода и цвет строки, когда он не сфокусирован? Например, я использую md-ввод на темном фоне, поэтому мне нужен белый шрифт и подчеркивание (см. Ниже). Примечание. Я хотел бы сохранить цвет по умолчанию для других моих форм, поэтому в идеале это решение, которое позволяет мне стилизовать конкретные элементы управления напрямую или способ размещения другой темы на входах.

Я решил аналогичную проблему с помощью приведенного ниже метода.

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{...}