本文目錄導(dǎo)讀：

1. 設(shè)置文本框背景色
2. 改變文本框邊框顏色
3. 添加過渡效果

CSS技巧：改變文本框樣式與顏色

在網(wǎng)頁設(shè)計中，文本框的樣式和顏色對于用戶體驗和頁面美觀***關(guān)重要，通過CSS（層疊樣式表），我們可以輕松改變文本框的顏色、大小、邊框等屬性，本文將介紹如何利用CSS給文本框變色，并優(yōu)化其樣式。

設(shè)置文本框背景色

要改變文本框的背景色，可以使用CSS的background-color屬性，將文本框背景色設(shè)置為藍(lán)色，可以使用以下代碼：

input[type="text"] {
  background-color: blue;
}

這將為所有文本輸入框設(shè)置藍(lán)色背景，你也可以使用其他顏色值，如十六進(jìn)制顏色碼、RGB值或顏色名稱。

改變文本框邊框顏色

除了背景色，我們還可以使用CSS改變文本框的邊框顏色，將文本框邊框顏色設(shè)置為紅色：

input[type="text"] {
  border: 2px solid red; /* 設(shè)置邊框?qū)挾葹?像素，樣式為實線，顏色為紅色 */
}

添加過渡效果

為了使文本框的顏色變化更加平滑，你可以使用CSS過渡效果，當(dāng)文本框獲得焦點時，逐漸變?yōu)榫G色：

input[type="text"]:focus {
  transition: background-color 0.3s ease; /* 設(shè)置過渡效果，持續(xù)時間為0.3秒 */
  background-color: green; /* 當(dāng)獲得焦點時，背景色變?yōu)榫G色 */
}

通過CSS，我們可以輕松改變文本框的顏色和樣式，提升用戶體驗和頁面美觀，在實際項目中，可以根據(jù)需求調(diào)整顏色、邊框等屬性，并添加過渡效果以增強(qiáng)用戶體驗，本文介紹了基本的CSS技巧，希望能幫助你更好地應(yīng)用在設(shè)計實踐中。