首页 文章

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

提问于
浏览 次
-1

我正在尝试制作占位符验证效果，当需要字段时，其占位符会将其颜色从白色更改为红色 . 请帮我解决一下这个 . 我已经尝试过webkits和bootstrap“控制标签”，但它无法正常工作 . 使用控件标签类，它在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;
    }
validation placeholder contact-form

1 回答

  • 0

    使用 [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/>
    回复于

相关问题