CSS搜索框顏色設置

搜索框是我們網站中十分常見的一個組件，而樣式也是搜索框的關鍵元素。下面我們將探討如何使用CSS來設置搜索框的顏色。

/*設置搜索框顏色*/
input[type="search"] {
background-color: #f2f2f2; /*搜索框背景顏色*/
border: none; /*去除搜索框邊框*/
border-radius: 4px; /*設置搜索框圓角*/
color: #333; /*文字顏色*/
padding: 8px 12px; /*內邊距*/
width: 100%; /*搜索框寬度*/
box-sizing: border-box; /*包括內邊距和邊框在內的元素框的大小*/
}
/*設置搜索框按鈕顏色*/
input[type="submit"] {
background-color: #008CBA; /*按鈕背景顏色*/
border: none; /*去除按鈕邊框*/
border-radius: 4px; /*設置按鈕圓角*/
color: #fff; /*按鈕文字顏色*/
padding: 8px 16px; /*內邊距*/
}

代碼中，我們使用了input[type="search"]和input[type="submit"]來分別設置搜索框和搜索按鈕的樣式。其中，background-color屬性用于設置背景顏色，border屬性用于去除邊框，border-radius屬性用于設置圓角，color屬性用于設置文字顏色，padding屬性用于設置內邊距，width屬性用于設置搜索框寬度，而box-sizing屬性用于包括內邊距和邊框在內的元素框的大小。

在實際應用中，可以根據自己網站的主題色來設置搜索框顏色，以達到更好的視覺效果。