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

2018年08月19日Web前端

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

一、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。