问：具体化 css 格式化表单输入

Question

我正在尝试更改具体化 css 中表单输入的边框和标签颜色。我按照文档进行了操作，但只有第一个 .input-field div 实例被更改，其余的仍使用默认样式。

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

编辑：标题错字

Answer 1

您的 CSS 使用 [type=text] 伪选择输入。你不想得到type="email" 和type="password" 的那些吗？