当需要字段时，占位符能否更改其颜色（验证）？

Question

我正在尝试制作一个占位符验证效果，当需要一个字段时，其占位符的颜色从白色变为红色。请帮我解决一下这个。我试过 webkit 和 bootstrap "control label" 但它不能正常工作。使用控制标签 class 它可以在 firefox 上正常工作，但在 google chrome.

中不能正常工作

这是我试过的

    <div class="form-group">
        <input type="text" required="required" class="control-label text-fields" placeholder="Name"  />
    </div>
    <div class="form-group">
        <input type="number" required="required" class="control-label text-fields" placeholder="Phone" />
    </div>
    <div class="form-group">
        <textarea class="control-label field" type="text" rows="2" placeholder="Address" required></textarea>
    </div>
    <div class="form-group">
        <textarea class="control-label field" type="text" rows="1" placeholder="Comments" required></textarea>
    </div>


    <CSS>
    ::-webkit-input-placeholder {
       color: white;
    }

    input:required {
        color:#red !important;
        box-shadow: none;
    }

    input:valid {
        color:#fff !important;
        box-shadow: none;
    }

    textarea:required {
        color:#red !important;
        box-shadow: none;
    }

    textarea:valid {
        color:#fff !important;
        box-shadow: none;
    }

Answer 1

使用 [required] 属性选择器为必填字段添加颜色。

[required]::-webkit-input-placeholder { /* WebKit browsers */
    color:    red;
}
[required]::-moz-placeholder { /* WebKit browsers */
    color:    red;
}
[required]::-ms-input-placeholder { /* WebKit browsers */
    color:    red;
}

<input type="text" placeholder="not required" />
<br>
<input type="text" placeholder="required" required/>

当需要字段时，占位符能否更改其颜色（验证）？

Can a placeholder change its color (validate) when the field is required?

validation

placeholder

contact-form