CSS是現代網頁設計中必不可少的一部分，它可以用來控制網頁元素的樣式和布局。其中，輸入框是網頁設計中經常用到的組件之一，下面讓我們一起來看一看如何使用CSS來寫輸入框。

/* 基本樣式 */
input[type="text"],
input[type="password"],
input[type="number"] {
width: 200px;
height: 30px;
border: 1px solid #ccc;
border-radius: 4px;
padding: 4px 8px;
font-size: 14px;
}
/* 輸入框聚焦 */
input[type="text"]:focus,
input[type="password"]:focus,
input[type="number"]:focus {
border: 1px solid #007bff;
box-shadow: 0 0 5px #007bff;
}
/* 輸入框禁用 */
input[type="text"]:disabled,
input[type="password"]:disabled,
input[type="number"]:disabled {
background-color: #eee;
cursor: not-allowed;
}

上面的代碼中，我們定義了基本樣式、輸入框聚焦和輸入框禁用三個狀態的樣式。

首先，我們為所有的文本、密碼和數字類型的輸入框定義了共同的樣式。在這里，我們設置了輸入框的寬度、高度、邊框樣式、圓角、內邊距和文字大小等屬性。

接著，我們為輸入框聚焦狀態定義了樣式。當用戶點擊輸入框并開始輸入時，輸入框將使用這個樣式來顯示。我們將輸入框的邊框寬度和顏色修改為了藍色，并添加了一個外發光效果，以增強用戶的視覺反饋。

最后，我們為輸入框禁用狀態定義了樣式。這個樣式將應用于那些被標記為禁用的輸入框，以提示用戶這些輸入框無法使用。我們將背景顏色設置為灰色，并禁用了鼠標指針，以防止用戶誤操作。

通過這些樣式的定義，我們可以輕松地創建出漂亮、易用的輸入框組件。在實際開發中，我們可以根據具體的需求進行樣式的修改，以滿足不同的設計要求。