CSS自動填寫框是Web開發中常用的一種組件，它可以方便地幫助用戶選擇或完成輸入，同時提高了用戶體驗。

下面是一個常見的自動填寫框的HTML代碼：

<input type="text" list="fruits">
<datalist id="fruits">
<option value="Apple">
<option value="Banana">
<option value="Cherry">
<option value="Durian">
</datalist>

這里使用了HTML5的datalist標簽來定義填寫框的選項。list屬性指定了與之關聯的datalist元素的ID，datalist中的option元素則用來定義可選項。

接下來，我們可以通過CSS來對這個自動填寫框進行樣式定義：

input {
padding: 10px;
border: 1px solid #CCC;
font-size: 16px;
}
datalist {
display: none; /*默認隱藏*/
}
input:focus + datalist {
display: block; /*獲取焦點時顯示*/
position: absolute;
z-index: 1;
background: #FFF;
border: 1px solid #CCC;
margin-top: 5px;
width: 100%;
max-height: 100px;
overflow-y: scroll;
}
option {
padding: 5px;
cursor: pointer;
}
option:hover {
background: #CCC;
}

這個CSS樣式定義中，我們為填寫框和datalist分別定義了樣式，并通過:focus偽類和+選擇器來實現在獲取焦點時顯示datalist的效果。

同時，我們還為選項元素定義了鼠標懸停時的效果，提高了用戶的交互體驗。

綜上，使用CSS來定義自動填寫框的樣式可以幫助我們更好地控制表單的外觀和交互效果，從而提高用戶的使用體驗。