什么 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 这样的选择器 空似乎不起作用。无效似乎不起作用。我意识到 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>