1. 問題
-
填充之前顏色
image.png -
填充之后顏色
image.png
背景顏色會(huì)自動(dòng)發(fā)生改變
2. 解決方案
2.1 第一種方法：(適用于vue element-ui框架)
- css設(shè)置背景色
input:-webkit-autofill { box-shadow: 0 0 0px 1000px white inset !important;}
- input標(biāo)簽添加autocomplete=“off” 指定某個(gè)文本框取消自動(dòng)填充
<el-input type="text" v-model="name" placeholder="請(qǐng)輸入賬號(hào)" autocomplete="off" ></el-input>
- form表單添加autocomplete=“off” 取消所有文本框元素的自動(dòng)填充
<el-form autocomplete="off">
</el-form>
2.2 第二種方法 （設(shè)置背景透明）
- 改變input自動(dòng)填充背景顏色
//改變input自動(dòng)填充背景顏色
input:-internal-autofill-previewed,
input:-internal-autofill-selected {
-webkit-text-fill-color: #808080;
transition: background-color 1000s ease-out 0.5s;
}
- transiton（過渡）詳解：
一、語(yǔ)法
transition: property duration timing-function delay
transition屬性是個(gè)復(fù)合屬性，她包括以下幾個(gè)子屬性：
transition-property ：規(guī)定設(shè)置過渡效果的css屬性名稱
transition-duration ：規(guī)定完成過渡效果需要多少秒或毫秒
transition-timing-function ：指定過渡函數(shù)，規(guī)定速度效果的速度曲線
transition-delay ：指定開始出現(xiàn)的延遲時(shí)間
默認(rèn)值分別為：all 0 ease 0
注：transition-duration 時(shí)長(zhǎng)為0，不會(huì)產(chǎn)生過渡效果
二、transition-timing-function屬性：
- ease:由快到慢到更慢
- linear:恒速
- ease-in:越來越快
- ease-out:越來越慢
- ease-in-out:先加速后減速
