搜索框是網站中非常常見的組件之一，通過它用戶可以方便地查找到自己需要的信息。下面我們將分享一些簡單的搜索框CSS代碼。

/* 搜索框樣式 */
input[type="text"] {
width: 180px; /* 搜索框寬度 */
padding: 10px; /* 內邊距 */
border: none; /* 去掉邊框 */
border-radius: 20px; /* 圓角 */
outline: none; /* 去掉默認輪廓線 */
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1); /* 陰影 */
font-size: 16px; /* 字體大小 */
}
/* 搜索按鈕樣式 */
button[type="submit"] {
background-color: #00bcd4; /* 背景顏色 */
color: #fff; /* 字體顏色 */
border: none; /* 去掉邊框 */
padding: 10px 20px; /* 內邊距 */
border-radius: 20px; /* 圓角 */
cursor: pointer; /* 鼠標樣式 */
font-size: 16px; /* 字體大小 */
transition: background-color 0.3s ease; /* 過渡效果 */
}
/* 按鈕鼠標懸停效果 */
button[type="submit"]:hover {
background-color: #0097a7;
}

以上代碼可以讓搜索框看起來更加美觀、實用，當然也可以根據個人需要自行修改CSS樣式。希望這些代碼能對大家有所幫助。