Html 在 Materialize.css 框架中更改下划线输入和标签的颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/37127123/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Change color of underline input and label in Materialize.css framework
提问by TimmyO18
I'm using the Materialize.css framework and I noticed that the color of the text inputfields is green and so is the label.
我正在使用 Materialize.css 框架，我注意到文本input字段的颜色是绿色的，.css 也是绿色的label。
Is there a way to change the color to something different?
有没有办法将颜色更改为不同的东西？
<input type="text" id="username" />
<label for="username">Username</label>
回答by dippas
You can, according to Materialize Docsby using:
根据Materialise Docs，您可以使用：
/* label focus color */
.input-field input[type=text]:focus + label {
color: #000;
}
/* label underline focus color */
.input-field input[type=text]:focus {
border-bottom: 1px solid #000;
box-shadow: 0 1px 0 0 #000;
}
Snippet
片段
/*** !important was needed for snippet ***/
/* label focus color */
.input-field input:focus + label {
color: red !important;
}
/* label underline focus color */
.row .input-field input:focus {
border-bottom: 1px solid red !important;
box-shadow: 0 1px 0 0 red !important
}<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css" rel="stylesheet" />
<link rel="stylesheet" href="http://fonts.googleapis.com/icon?family=Material+Icons">
<div class="row">
<form class="col s12">
<div class="row">
<div class="input-field col s6">
<i class="material-icons prefix">account_circle</i>
<input id="icon_prefix" type="text" class="validate">
<label for="icon_prefix">First Name</label>
</div>
<div class="input-field col s6">
<i class="material-icons prefix">phone</i>
<input id="icon_telephone" type="tel" class="validate">
<label for="icon_telephone">Telephone</label>
</div>
</div>
</form>
</div>回答by manuman94
The dippas answer is correct, but if you want textareas to be the same colour you have to set this CSS rules:
dippas 的答案是正确的，但是如果您希望 textareas 具有相同的颜色，则必须设置以下 CSS 规则：
/* label focus color */
.input-field input[type=text]:focus + label, .materialize-textarea:focus:not([readonly]) + label {
color: #005eed !important;
}
/* label underline focus color */
.input-field input[type=text]:focus, .materialize-textarea:focus:not([readonly]) {
border-bottom: 1px solid #005eed !important;
box-shadow: 0 1px 0 0 #005eed !important;
}
Note the .materialize-textarea rule for label and border bottom.
注意标签和边框底部的 .materialize-textarea 规则。
回答by runninghair08
In case anyone is here in 2019 and trying this with the new version of Materialize (1.0.0) andnot wanting to use !importantin their css, the below snippet worked for me.
如果有人在 2019 年在这里尝试使用新版本的 Materialize (1.0.0)并且不想在他们的 css 中使用!important，下面的代码片段对我有用。
Note: This will apply to all input fields, if you want specific ones, i.e. text, then change [type] to [type=text].
注意：这将适用于所有输入字段，如果您想要特定的输入字段，即文本，则将 [type] 更改为 [type=text]。
/* Inactive/Active Default input field color */
.input-field input[type]:not([readonly]),
.input-field input[type]:focus:not([readonly]),
.input-field textarea:not([readonly]),
.input-field textarea:focus:not([readonly]) {
border-bottom: 1px solid #01579b;
box-shadow: 0 1px 0 0 #01579b;
}
/* Inactive/Active Default input label color */
.input-field input[type]:focus:not([readonly])+label,
.input-field textarea:focus:not([readonly])+label {
color: #01579b;
}
/* Active/Inactive Invalid input field colors */
.input-field input[type].invalid,
.input-field input[type].invalid:focus,
.input-field textarea.invalid,
.input-field textarea.invalid:focus {
border-bottom: 1px solid #e57373;
box-shadow: 0 1px 0 0 #e57373;
}
/* Active/Inactive Invalid input label color */
.input-field input[type].invalid:focus+label,
.input-field input[type].invalid~.helper-text::after,
.input-field input[type].invalid:focus~.helper-text::after,
.input-field textarea.invalid:focus+label,
.input-field textarea.invalid~.helper-text::after,
.input-field textarea.invalid:focus~.helper-text::after {
color: #e57373;
}
/* Active/Inactive Valid input field color */
.input-field input[type].valid,
.input-field input[type].valid:focus,
.input-field textarea.valid,
.input-field textarea.valid:focus {
border-bottom: 1px solid #26a69a;
box-shadow: 0 1px 0 0 #26a69a;
}
/* Active/Inactive Valid input label color */
.input-field input[type].valid:focus+label,
.input-field input[type].valid~.helper-text::after,
.input-field input[type].valid:focus~.helper-text::after,
.input-field textarea.valid:focus+label,
.input-field textarea.valid~.helper-text::after,
.input-field textarea.valid:focus~.helper-text::after {
color: #26a69a;
}
Snippet
片段
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<style type="text/css">
.input-field input[type]:not([readonly]),
.input-field input[type]:focus:not([readonly]),
.input-field textarea:not([readonly]),
.input-field textarea:focus:not([readonly]) {
border-bottom: 1px solid #01579b;
box-shadow: 0 1px 0 0 #01579b;
}
.input-field input[type]:focus:not([readonly])+label,
.input-field textarea:focus:not([readonly])+label {
color: #01579b;
}
.input-field input[type].invalid,
.input-field input[type].invalid:focus,
.input-field textarea.invalid,
.input-field textarea.invalid:focus {
border-bottom: 1px solid #e57373;
box-shadow: 0 1px 0 0 #e57373;
}
.input-field input[type].invalid:focus+label,
.input-field input[type].invalid~.helper-text::after,
.input-field input[type].invalid:focus~.helper-text::after,
.input-field textarea.invalid:focus+label,
.input-field textarea.invalid~.helper-text::after,
.input-field textarea.invalid:focus~.helper-text::after {
color: #e57373;
}
.input-field input[type].valid,
.input-field input[type].valid:focus,
.input-field textarea.valid,
.input-field textarea.valid:focus {
border-bottom: 1px solid #26a69a;
box-shadow: 0 1px 0 0 #26a69a;
}
.input-field input[type].valid:focus+label,
.input-field input[type].valid~.helper-text::after,
.input-field input[type].valid:focus~.helper-text::after,
.input-field textarea.valid:focus+label,
.input-field textarea.valid~.helper-text::after,
.input-field textarea.valid:focus~.helper-text::after {
color: #26a69a;
}
</style>
</head>
<body>
<div class="input-field">
<input id="email" name="email" type="email" class="validate" required="required" autofocus>
<label for="email">Email</label>
<span class="helper-text" data-error="Must be a valid email" data-success="Perfect!"></span>
</div>
</div>
<div class="row">
<div class="input-field">
<input id="password" name="password" type="password"class="validate" required="required" minlength="6">
<label for="password">Password</label>
<span class="helper-text" data-error="Must have 6 or more characters" data-success="Perfect!"></span>
</div>
</div>
<div class="row">
<div class="input-field">
<textarea id="textarea" name="textarea" class="materialize-textarea validate" required="required" minlength="6"></textarea>
<label for="textarea">Textarea</label>
<span class="helper-text" data-error="Must have 6 or more characters" data-success="Perfect!"></span>
</div>
</div>
</body>回答by faherrera
In the docs say how you can set the materialize default color. You need to download sassfiles into your project and then you need to change those variables.
在文档中说明如何设置物化默认颜色。您需要将sass文件下载到您的项目中，然后您需要更改这些变量。
You need to go to /sass/components/forms/*/to set the element you need.
你需要去/sass/components/forms/*/设置你需要的元素。
In all element you can see the color is the $secondary-color, that variable you can find in /sass/components/_variables.scssfile, and you can set change its value to your color for all your project.
在所有元素中，您可以看到颜色是$secondary-color，您可以在/sass/components/_variables.scss文件中找到该变量，您可以将其值更改为您所有项目的颜色。
回答by Let's Yo
finally, I found the solution. You need to change the color for active and not active.
最后，我找到了解决方案。您需要更改活动和非活动的颜色。
ICONS:
图标：
.material-icons{
color: #1a237e !important;
}
.material-icons.active {
color: #b71c1c !important;
}
TEXT-FIELD:
文本域：
.input-field input[type=text] + label, .materialize-textarea:focus:not([readonly]) + label {
color: #1a237e !important;
}
.input-field input[type=text], .materialize-textarea:focus:not([readonly]) {
border-bottom: 1px solid #1a237e !important;
box-shadow: 0 1px 0 0 #1a237e !important;
}
.input-field input[type=text]:focus + label, .materialize-textarea:focus:not([readonly]) + label {
color: #b71c1c !important;
}
.input-field input[type=text]:focus, .materialize-textarea:focus:not([readonly]) {
border-bottom: 1px solid #b71c1c !important;
box-shadow: 0 1px 0 0 #b71c1c !important;
}
