Я использую фреймворк Materialize.css, и я заметил, что цвет текстовых полей input
зеленый, и это значит label
.
Есть ли способ изменить цвет на что-то другое?
<input type="text" id="username" />
<label for="username">Username</label>
Я использую фреймворк Materialize.css, и я заметил, что цвет текстовых полей input
зеленый, и это значит label
.
Есть ли способ изменить цвет на что-то другое?
<input type="text" id="username" />
<label for="username">Username</label>
В соответствии с Materialize 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;
}
/*** !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>
Ответ dippas правильный, но если вы хотите, чтобы текстовые поля были одного цвета, вы должны установить следующие правила 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;
}
Обратите внимание на правило .materialize-textarea для метки и нижней границы.
В документах говорится, как вы можете установить цвет материализованного по умолчанию. Вам нужно загрузить файлы sass
в свой проект, а затем вам нужно будет изменить эти переменные.
Вам нужно перейти в /sass/components/forms/*/
, чтобы установить необходимый элемент.
Во всем элементе вы можете видеть, что цвет - это $secondary-color
, эта переменная, которую вы можете найти в файле /sass/components/_variables.scss
, и вы можете изменить его значение на свой цвет для всего вашего проекта.
наконец я нашел решение. Вам нужно изменить цвет на активный и не активный.
ИКОНЫ:
.material-icons{
color: #1a237e !important;
}
.material-icons.active {
color: #b71c1c !important;
}
ТЕКСТОВОЕ ПОЛЕ:
.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;
}
В случае, если кто-то здесь в 2019 году и пробует это с новой версией Materialize (1.0.0) и не хочет использовать ! Важный в их css, приведенный ниже фрагмент работал для меня.
Примечание: это будет применяться ко всем полям ввода, если вы хотите, чтобы определенные поля, например, текст, затем измените [тип] на [тип = текст].
/* 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;
}
<!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>
Для людей, спрашивающих, я сделал это: я назвал каждый вход с другим id, а затем, в мой файл css, я поставил:
#ID1, #ID2, #ID3, #ID4, #ID5 {
color: #111111;
border-bottom: 1px solid #edeeee;
}
#ID1:focus, #ID2:focus, #ID3:focus, #ID4:focus, #ID5:focus {
border-bottom: 1px solid #6E0000;
box-shadow: none;
}
И используя это, я ставил свои пользовательские границы границ в фокусе, а не в фокусе.