本文介绍了更改角度材质输入样式的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在尝试更改角形材质输入的样式.
到目前为止,我设法使用
md-input-container {
padding-bottom: 5px;
background-color: #222;
}
更改了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;
}
I am trying to change the style of a angular material input.
So far I managed to change the background-color
using :
md-input-container {
padding-bottom: 5px;
background-color: #222;
}
The placeholder and label color using :
md-input-container.md-default-theme label,
md-input-container.md-default-theme .md-placeholder {
color: #FDFE67 !important;
}
But I can't manage to change the line color under the text when we focus
the input and the text color when we type in the input.
Here is the html input :
<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>
Edit: I managed to change the text color when typing this way :
md-input-container .md-input {
color: rgba(255,255,255,0.87);
border-color: rgba(254,253,103,0.82);
}
解决方案
This is the CSS selector used by Angular Material:
md-input-container:not(.md-input-invalid).md-input-focused .md-input {
border-color: your_color_here;
}
这篇关于更改角度材质输入样式的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!