如果文本超过输入字段的最大长度，文本上的渐变颜色将停止工作

Question

我有一个表单来提交名称，email，消息。 此表单的文本应用了彩虹渐变。 当我在名称中输入的文本和 email 字段超过 div 可以显示的文本停止应用彩虹渐变并变成白色时。 我怎样才能使它始终应用渐变？

 span, .greeting, #contact, .contact-form, input, .message, .contact-form button { background: linear-gradient(to right, #ee7f7e, #f896fc, #b189f5, #87c1f1, #8ee3ee, #8cf391, #f1fa90, #f3cb8a, #f5a289); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; -moz-background-clip: text; -moz-text-fill-color: transparent; -o-background-clip: text; -o-text-fill-color: transparent; -ms-background-clip: text; -ms-text-fill-color: transparent; }.contact-form input, .contact-form textarea, .contact-form button, .modal-bg { width: 100%; }.contact-form input, .contact-form textarea, .contact-form button { padding: 12px 20px; outline: none; }

 <div id="contact"> <h1>Contact me</h1> <p>Send a message and I will get back to you within 24 hours.</p> <form method="POST" class="contact-form"> <label>Name</label> <input class="name" type="text" placeholder="name" /> <label>Email</label> <input class="email" type="email" placeholder="email" /> <label>Message</label> <textarea class="message" cols="30 " rows="10" placeholder="message"></textarea> <button type="submit">Submit</button> </form> </div>

Answer 1

只需在表单上设置最大长度即可。 20 年来，我还没有看到超过 100 个字符的 email。

<input class="name" type="text" placeholder="name" maxlength="100" />
<input class="email" type="email" placeholder="email" maxlength="100" />