MDL 浮动标签文本字段:更改其颜色
Posted
技术标签:
【中文标题】MDL 浮动标签文本字段:更改其颜色【英文标题】:MDL floating label textfields: changing its colour 【发布时间】:2021-12-02 19:35:49 【问题描述】:目前,我的 html 文件中的文本字段是蓝色的。有没有办法让它变红?谢谢。
这是 HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Textfield Demo</title>
<!-- Import MDL libraries -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.blue-red.min.css"/>
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
</head>
<body>
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<main class="mdl-layout__content">
<div class="page-content">
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--1-col"></div>
<div class="mdl-cell--10-col" style="text-align:center; height:60vh">
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="search-bar">
<label class="mdl-textfield__label" for="search-bar">Text...</label>
</div>
</div>
<div class="mdl-cell mdl-cell--1-col"></div>
</div>
</div>
</main>
</div>
</body>
</html>
【问题讨论】:
【参考方案1】:如下更新您的 CSS,
.is-focused
color: #FD5155 !important;
.mdl-textfield--floating-label.is-focused .mdl-textfield__label, .mdl-textfield--floating-label.is-dirty .mdl-textfield__label, .mdl-textfield--floating-label.has-placeholder .mdl-textfield__label
color: #FD5155 !important;
.mdl-textfield__input
border-color: #FD5155 !important;
【讨论】:
单击时显示的下划线仍然是蓝色的。另外,有没有可能和按钮一样的红色? 当然@KenEly 将CSS文件复制到您的项目目录中并相应地更新颜色代码 这是您按钮的红色代码#fd5155
您必须将RGB代码rgb(33,150,243)
替换为红色代码以上是关于MDL 浮动标签文本字段:更改其颜色的主要内容,如果未能解决你的问题,请参考以下文章