Question

我试图创建一个只使用输入/ textarea w / border-bottom的表单，但是当我在语法中使用required时它保留为空它会在输入/ textarea的所有四个边周围给出一个丑陋的红色边框

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>

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

1 个答案: