必填字段的背景颜色

我在窗体中的某些字段上使用了必需的属性。当表单被提交时，未填写的必填字段将获得标准的红色边框。有没有办法改变提交后未填写的必填字段的背景颜色？这仅仅是我与所需的属性使用样本文本框：必填字段的背景颜色

<input id="LastName" name="LastName" type="text" placeholder="Last Name" required/>

来源

2016-10-01 dr1054

你需要寻找到验证....这通常是通过使用Javascript –

您可以使用CSS attribute selector像这样：

input[required] { 
 
    background-color: red; 
 
}

<input id="LastName" name="LastName" type="text" placeholder="Last Name" 
 
required/>

这将选择required属性input小号。现在，你可以用一些简单的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>添加类。

来源

2016-10-01 15:17:14 Li357

处理，我不认为你想所示时刻 - 只要提交后，如边界，这将需要的JavaScript。 –

德鲁 - 是的，这是正确的，只有在提交后。多谢你们。 – dr1054

啊，我没有看到您的更新。我会删除我的答案。 :) –

你好，你可以通过基本的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>

来源

2016-10-01 15:27:40

遍历一个id为单个输入？这并没有什么意义，因为你希望这个ID是唯一的。 –

我只是展示一个示例如果所有的输入都是在表单或div中，那么div ID应该在jQuery中 –

Asifuzzaman - 我使用了整个表单的脚本。但是，对于提交按钮的HTML，我说type =“submit”而不是type =“button”。尝试了两个实际并没有工作。它仍然在文本框周围有红色边框，并且在提交后没有更改背景颜色。 – dr1054

-1

input[type="text"],lastname { 
    background-color : red; 
}

来源

2016-10-01 15:34:54

这会为所有文本输入的背景始终着色。 OP只在表单被验证时才需要。 – j08691

您可以使用CSS在一些评论中提到上述，如果它不工作，然后检查父背景颜色属性是否设置，在改变这种情况下，你可以使用！重要的标签来强制孩子。

来源

2016-10-01 15:43:09

-1

body input:focus:required:invalid, 
body textarea:focus:required:invalid { 
    color: green; 
}

来源

2017-05-07 17:14:07 JSHunterYS

请包括您的代码的解释，也有助于使用代码格式和/或适当的缩进来提高可读性。 –

必填字段的背景颜色

回答

相关问题