在Web設計和開發(fā)中，表單輸入框是一個常見的元素。在實際應用中，我們通常需要對輸入框進行一些樣式定制，比如輸入框的邊框、顏色、大小等等。這里我們來探究一下如何通過CSS讓輸入框在獲得焦點時變色。

/* 定義輸入框樣式 */
input {
width: 200px; /* 寬度 */
height: 30px; /* 高度 */
border: 1px solid #ccc; /* 邊框 */
}
/* 定義輸入框獲得焦點時的樣式 */
input:focus {
border-color: #0072C6; /* 邊框顏色 */
box-shadow: 0 0 5px rgba(0, 114, 198, 0.5); /* 陰影 */
}

上述代碼中，我們首先定義了一個名為“input”的選擇器，用來控制所有輸入框的樣式。在這個選擇器中，我們定義了輸入框的大小、邊框和顏色等樣式。

接下來，我們使用偽類選擇器“:focus”來指定當輸入框獲得焦點時的樣式。在這里，我們將輸入框的邊框顏色設置為藍色，同時添加一個淡藍色的陰影。這樣，在用戶點擊或者輸入到輸入框時，就能看到明顯的反饋效果，從而提高了用戶體驗。

總之，通過CSS讓輸入框獲得焦點時變色十分簡單。只需要定義好輸入框的樣式，然后使用:focus偽類選擇器來設置輸入框獲得焦點時的樣式即可。這種方法不僅簡單易懂，而且能提高頁面的交互性和用戶體驗。