搜索框是現(xiàn)代網(wǎng)站中必不可少的元素之一。如何讓搜索框更加醒目，讓用戶更加容易發(fā)現(xiàn)它，進而提高網(wǎng)站的使用度呢？其中一個方法就是使用CSS，使得搜索框可以在鼠標聚焦時自動變大。

要實現(xiàn)這個效果，我們可以通過CSS的偽類:hover來控制搜索框的樣式，在搜索框獲得鼠標焦點的時候，我們可以讓它的寬度和高度變大，使得搜索框更加明顯，方便用戶使用。

input[type="text"] {
width: 200px;
height: 30px;
border-radius: 5px;
border: none;
outline: none;
transition: width 0.3s, height 0.3s; // 過渡效果
}
input[type="text"]:hover,
input[type="text"]:focus {
width: 250px;
height: 40px;
}

我們首先定義了搜索框的基本樣式，包括寬度、高度、圓角、邊框等，同時設(shè)置了一個過渡效果，使得搜索框從原始大小變大時可以有一個平滑的過渡動畫。當鼠標移動到搜索框上時，搜索框的大小會自動變大，用戶可以更加容易地看到它。當用戶在搜索框中輸入內(nèi)容時，搜索框的大小也會變大，方便用戶查看輸入的文字。

這個方法可以在不改變搜索框原有樣式的前提下，讓搜索框更加醒目，提高用戶的使用體驗。如果您的網(wǎng)站中需要使用搜索框，這是一個非常實用的技巧。