---
tags: CSS,
disqus: hackmd
---

###### tags: `CSS` `input` `form` `autofill` `autocomplete` `input:-internal-autofill-selected`

# 瀏覽器表單自動填充的默認樣式-autofill

[CSS（一）chrome浏览器表单自动填充默认样式-autofill](https://blog.csdn.net/zhengjie0722/article/details/90319321)

---

這三張圖想表達的意思是，我在瀏覽器上的input輸入帳號的時候，瀏覽器貼心的幫我把之前輸入過的帳號列出來給我，讓我可以快速選取，但是這樣的選取方式，會順便帶上瀏覽器的autoFill預設樣式，這樣就破壞了我的版面樣式。

要避免這樣的情況發生，最直接的方式就是，把input的autofill關閉。

#### 關閉autoFill

<!-- 對整個form的設置 -->
<form autocomplete="off">
<!-- 單獨對input設置 -->
<input type="text" autocomplete="off">

#### 變更input在autofill時的顏色

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active  {
    -webkit-text-fill-color: #D8CB86;
    -webkit-box-shadow: 0 0 0 1000px rgba(255,255,255,0) inset;
    transition: background-color 5000s ease-in-out 0s;
}

5000s是transition-duration，就是說變更input在autofill的情況下，改變顏色5千秒。