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

Question

我有一个表格来提交姓名，电子邮件，信息。此表单的文本应用了彩虹渐变。当我在name和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个字符的电子邮件。

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