更改 angular material 输入法
Change angular material input style
我正在尝试更改 angular material 输入的样式。
到目前为止,我设法使用 :
更改了 background-color
md-input-container {
padding-bottom: 5px;
background-color: #222;
}
占位符和标签颜色使用:
md-input-container.md-default-theme label,
md-input-container.md-default-theme .md-placeholder {
color: #FDFE67 !important;
}
但是我无法更改 focus
输入时文本下的线条颜色和输入时的文本颜色。
这是 html 输入:
<md-content>
<md-input-container>
<label>{{isEnglish ? 'Search...' : 'Recherche...'}}</label>
<input ng-model="searchInput" id="sInput"
ng-change="filterCartoList(searchInput)" my-enter="filterCartoList(searchInput)">
</md-input-container>
</md-content>
编辑: 以这种方式输入时我设法更改了文本颜色:
md-input-container .md-input {
color: rgba(255,255,255,0.87);
border-color: rgba(254,253,103,0.82);
}
这是 Angular Material 使用的 CSS 选择器:
md-input-container:not(.md-input-invalid).md-input-focused .md-input {
border-color: your_color_here;
}
<md-input-container style="position: relative; top:19px;">
<label style="border-color: white; color: white;">Email</label>
<input style="border-color: white; color: white;" >
</md-input-container>
我正在尝试更改 angular material 输入的样式。
到目前为止,我设法使用 :
更改了background-color
md-input-container {
padding-bottom: 5px;
background-color: #222;
}
占位符和标签颜色使用:
md-input-container.md-default-theme label,
md-input-container.md-default-theme .md-placeholder {
color: #FDFE67 !important;
}
但是我无法更改 focus
输入时文本下的线条颜色和输入时的文本颜色。
这是 html 输入:
<md-content>
<md-input-container>
<label>{{isEnglish ? 'Search...' : 'Recherche...'}}</label>
<input ng-model="searchInput" id="sInput"
ng-change="filterCartoList(searchInput)" my-enter="filterCartoList(searchInput)">
</md-input-container>
</md-content>
编辑: 以这种方式输入时我设法更改了文本颜色:
md-input-container .md-input {
color: rgba(255,255,255,0.87);
border-color: rgba(254,253,103,0.82);
}
这是 Angular Material 使用的 CSS 选择器:
md-input-container:not(.md-input-invalid).md-input-focused .md-input {
border-color: your_color_here;
}
<md-input-container style="position: relative; top:19px;">
<label style="border-color: white; color: white;">Email</label>
<input style="border-color: white; color: white;" >
</md-input-container>