更改角度材质输入样式

Posted 2023-03-05

【中文标题】更改角度材质输入样式

【英文标题】：Change angular material input style

【发布时间】：2015-12-11 16:09:22

【问题描述】：

我正在尝试更改角度材质输入的样式。

到目前为止，我设法使用以下方法更改了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);

【问题讨论】：

摆弄一下，这种方式不清楚，帮不上忙

只需更改现有材料输入的颜色，我们可以在那里找到：material.angularjs.org/latest/#/demo/material.components.input 看过他们的示例后，“我们聚焦输入时文本下方的线条颜色和输入输入时的文本颜色。”你应该更清楚，你可以直接将他们的例子导出到codepen。我还在问题中添加了 html 输入

【参考方案1】：

这是 Angular Material 使用的 CSS 选择器：

md-input-container:not(.md-input-invalid).md-input-focused .md-input 
    border-color: your_color_here;

【讨论】：

谢谢，不知道在他们的文档中哪里可以找到这些选择器 :(

我刚刚使用 chrome 开发工具进行了检查

好吧，我没能检查焦点元素。当你实际发布时正在调查它

【参考方案2】：

<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>