html - 什么 CSS 选择器影响未填充所需输入的边框？

Question

我正在尝试创建一个仅使用带有边框底部的输入/文本区域的表单，但是当在我的语法中使用 required 时留空时，它会在输入/文本区域的所有四个边周围给出一个丑陋的红色边框。

input, textarea {
   background-color: inherit;
   border: 0;
   border-bottom: 2px solid $primary-color;
   color: #fff;
   font-size: 1.2em;
   line-height: 2.5;
   margin-right: 25px;
   width: 25%;
}

input:last-child {
   margin-right: 0;
   margin-left: 25px;
}

input::placeholder, textarea::placeholder {
   color: #fff;
}

textarea {
   font-family: $font-family-sans-serif;
   margin: 30px 25px;
   resize: none;
   width: 55%;
}

<input type="text" name="name" placeholder="Full Name" required>
<input type="email" name="email" placeholder="E-Mail" required>
<textarea name="message" cols"30" rows="5" placeholder="Message" required></textarea>

我试过像 :empty/:invalid/:required 这样的选择器空的好像不行。无效似乎不起作用。我意识到需要选择所有必填字段并进行样式设置，显然这行不通。

我在寻找什么 CSS 选择器？

我所指的示例: Red Box, What selector to target

Answer 1

我猜你使用的是 firefox，它有一个默认的红色框阴影用于无效元素。

你可以通过应用来摆脱它

input:required:invalid, input:focus:invalid {
  -moz-box-shadow: none;
}

下面是完整的例子，小心点，我已经用静态值替换了你的变量

input:required:invalid, input:focus:invalid {
  -moz-box-shadow: none;
}

input, textarea {
   background-color: inherit;
   border: 0;
   border-bottom: 2px solid blue;
   color: black;
   font-size: 1.2em;
   line-height: 2.5;
   margin-right: 25px;
   width: 25%;
}

input:last-child {
   margin-right: 0;
   margin-left: 25px;
}

input::placeholder, textarea::placeholder {
   color: grey;
}

textarea {
   font-family: sans-serif;
   margin: 30px 25px;
   resize: none;
   width: 55%;
}

<input type="text" name="name" placeholder="Full Name" required>
<input type="email" name="email" placeholder="E-Mail" required>
<textarea name="message" cols"30" rows="5" placeholder="Message" required></textarea>