我正在尝试创建一个仅使用带有边框底部的输入/文本区域的表单,但是当在我的语法中使用 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
最佳答案
我猜你使用的是 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>
关于html - 什么 CSS 选择器影响未填充所需输入的边框?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48846852/