达到最大长度限制时更改输入字段样式 [英] Change input field style when reaches max length limit

问题描述

我创建了一个具有文本输入字段并设置了maxlength的联系表单.我希望当输入的字符大于10时，使输入字段显示为红色.

I created a contact form that has a text input field and maxlength set. I wish that when the characters of the input is greater than 10, then make input field to display in red.

<form action="contact.php">
  Username: <input type="text" name="name" maxlength="10"><br>
  <input type="submit" value="Submit">
</form> 

推荐答案

您可以在CSS中使用选择器:invalid

You could use the selector :invalid in your CSS

input:invalid {
    border: 1px solid #FF0000;
}

只要不符合条件，这将为所有Input元素赋予红色边框(尽管如注释之一所述，输入字段中的字符数绝不能超过最大长度").

This will give all your Input elements a red border, whenever they do not meet the criteria (though as stated in one of the comments the number of characters in your input field can never exceed "maxlength").

这篇关于达到最大长度限制时更改输入字段样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！