我在表单中的某些字段上使用了 required 属性。提交表单时，未填写的必填字段会在其周围显示标准的红色边框。有没有办法也改变提交后未填写的必填字段的背景颜色？这只是我使用所需属性的示例文本框：
<input id="LastName" name="LastName" type="text" placeholder="Last Name" required/>
【问题讨论】：
你可以像这样使用CSS attribute selector：
input[required] {
background-color: red;
}<input id="LastName" name="LastName" type="text" placeholder="Last Name"
required/>这将选择具有required 属性的inputs。现在，您可以通过一些简单的 JavaScript 应用它来达到预期的效果：
var submit_button = document.getElementById("submit_button");
submit_button.addEventListener("click", function(e) {
var required = document.querySelectorAll("input[required]");
required.forEach(function(element) {
if(element.value.trim() == "") {
element.style.backgroundColor = "red";
} else {
element.style.backgroundColor = "white";
}
});
});<input id="FirstName" name="FirstName" type="text" placeholder="First Name" required/>
<input id="LastName" name="LastName" type="text" placeholder="Last Name" required/>
<input id="submit_button" type="submit">它的作用是在单击提交按钮时添加一个事件侦听器。如果是，它使用querySelectorAll 来获取与CSS 属性选择器input[required] 匹配的所有输入。接下来，它对返回的元素列表执行 for-each 循环。最后，它检查每个输入值，修剪，以确保其中有一些内容（空格不计算在内）。如果输入中没有任何内容，则将背景颜色设置为红色。
注意事项：
您可以随意调整它，如果输入无效，请确保取消您正在处理的任何事件，并且您可以为样式添加类而不是使用element.style.<style>。
【讨论】：
您可以使用上面某些 cmets 中提到的 css 来更改它，如果它不起作用，请检查是否设置了父背景颜色属性，在这种情况下您可以使用 !important 标记强制为孩子。
【讨论】：
你好，你可以通过基本的 Css 试试这个
:required {
background: red;
}
或者轻松地使用 jQuery，它会动态工作在按钮上单击背景颜色将是红色希望它有所帮助。
html代码
<input id="LastName" name="LastName" type="text" placeholder="Last Name"
required/>
<input id="sub" type="button">
和jquery代码
<script>
$('#sub').click(function(){
$('#LastName').each(function() {
if($(this).val() == '') {
$(this).css('background-color' , '#FF0000');
$(this).attr("placeholder", "Required");
}
});
});
</script>
但是，如果您想对整个表单执行此操作，则如下所示
<script>
$('#sub').click(function(e){ //submit button name
e.preventDefault()
$('.required').each(function() { //a constant class for evert input item
if($(this).val() == '') {
$(this).css('background-color' , '#FF0000');
$(this).attr("placeholder", "Required");
}
});
});
</sctript>
见下面的小提琴 required Fiddle
必须在头内添加 jQuery 库
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
</head>
【讨论】：
input[type="text"],lastname {
background-color : red;
}
【讨论】：
body input:focus:required:invalid,
body textarea:focus:required:invalid {
color: green;
}
【讨论】：