达到最大长度限制时更改输入字段样式

本文介绍了达到最大长度限制时更改输入字段样式的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我创建了一个具有文本输入字段并设置了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").