输入框默认值和背景色问题

2018年08月19日Web前端0

最近出去“浪”，被问了个表单下输入框默认值的问题，额，居然不知道。。。

一、input不显示已输入过的值

<form action="POST">
    <input type="text" name="aaa" autocomplete="on" />
    <input type="text" name="bbb" autocomplete="off" />
    <button type="submit">111</button>
</form>

大概就这这样的，表单提交后，第二次到这个页面上，鼠标点击输入框，默认的会显示以前输入过的值。而设置了autocomplete是off的元素则不hi有显示。

二、修改默认值的颜色（chrome自动填充的颜色）

当autocomplete是on时，鼠标在历史值上选择或者选择后，输入框会变成黄色背景的，如

用这种方式的话，可以让他显示成默认得输入框的样式：

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px white inset;
    -webkit-text-fill-color: #333;
}

还有种情况，chrome自带的填充用户名和密码也会让输入框背景变成这样黄色背景的，这种方式同样可以生效。不过目前只支持chrome。

HTMLHTML5

目录