Chrome 下input的默認樣式

一.去除默認邊框以及padding

border: none;
padding:0

 

二.去除聚焦藍色邊框

    outline: none;

 

三.form表單自動填充變色

1.給input設置內置陰影，至少要比你的input自己大。不過，box-shadow是很慢的，適當大小。並且，若是你的input是用圖片作背景的話，是沒有辦法作這麼幹的。設置transparent也不能夠。

input:-webkit-autofill,
    textarea:-webkit-autofill,
    select:-webkit-autofill {
        -webkit-box-shadow: 0 0 0 100px white inset; //經過內陰影覆蓋默認黃色背景
        -webkit-text-fill-color: #333;               //去除默認黑色字色
}

 

2.關閉自動補全

<input type="text"  autocomplete="off">

 

3.設置背景變換過渡，可短期內保持本來背景（支持透明）

 

transition: background-color 5000s ease-in-out 0s; 

 

 

 

 

 四.改變placeholder樣式

input::-webkit-input-placeholder{color:rgba(0,0,0,0.3);}
input::-moz-input-placeholder{color:rgba(0,0,0,0.3);}
input::-ms-input-placeholder{color:rgba(0,0,0,0.3);}
input::-o-input-placeholder{color:rgba(0,0,0,0.3);}