我正在尝试更改物质CSS中表单输入的边框和标记颜色。我遵循文档,但仅更改了.input-fielddiv的第一个实例,其余的仍在使用默认样式。
codepen
html
<div class="input-field">
<input id="account_name" type="text" class="validate">
<label for="account_name">Account Name</label>
</div>
<div class="input-field">
<input id="email" type="email" class="validate">
<label for="email">Email</label>
</div>
<div class="input-field">
<input id="password" type="password" class="validate">
<label for="password">Password</label>
</div>
CSS
/* label color */
.input-field label {
color: #000;
}
/* label focus color */
.input-field input[type=text]:focus + label {
color: purple !important;
}
/* label underline focus color */
.input-field input[type=text]:focus {
border-bottom: 1px solid purple !important;
box-shadow: 0 1px 0 0 purple !important;
}
/* valid color */
.input-field input[type=text].valid {
border-bottom: 1px solid purple !important;
box-shadow: 0 1px 0 0 purple !important;
}
/* invalid color */
.input-field input[type=text].invalid {
border-bottom: 1px solid #000;
box-shadow: 0 1px 0 0 #000;
}
/* icon prefix focus color */
.input-field .prefix.active {
color: #000;
}
编辑:title on Title
您的CSS使用[type=text]
伪选择输入。您不想也要用type="email"
和type="password"
获得那些吗?