如何寫搜索框的CSS代碼

搜索框的CSS代碼可以根據具體的設計需求進行編寫，以下是一些基本的搜索框樣式：

1、搜索框的容器：

#search-container {
  width: 200px; /* 搜索框的寬度 */
  height: 30px; /* 搜索框的高度 */
  border: 1px solid #ccc; /* 搜索框的邊框樣式 */
  border-radius: 5px; /* 搜索框的圓角樣式 */
  padding: 5px; /* 搜索框的內邊距 */
}

2、搜索框的輸入：

#search-input {
  width: 100%; /* 輸入框的寬度 */
  height: 100%; /* 輸入框的高度 */
  border: none; /* 輸入框的邊框樣式 */
  font-size: 16px; /* 輸入框的字體大小 */
  line-height: 30px; /* 輸入框的行高 */
}

3、搜索框的按鈕：

#search-button {
  width: 50px; /* 按鈕的寬度 */
  height: 30px; /* 按鈕的高度 */
  border: 1px solid #ccc; /* 按鈕的邊框樣式 */
  border-radius: 5px; /* 按鈕的圓角樣式 */
  background-color: #f0f0f0; /* 按鈕的背景顏色 */
  font-size: 16px; /* 按鈕的字體大小 */
  color: #333; /* 按鈕的文字顏色 */
}

是一些基本的搜索框樣式，可以根據具體的設計需求進行調整，可以使用一些CSS框架，如Bootstrap、Foundation等，來快速實現(xiàn)搜索框的樣式。