標題：用 CSS 創建搜索框

隨著互聯網的發展，搜索已經成為了人們日常生活中必不可少的一部分。搜索框已經成為了網頁中不可或缺的元素之一，但是傳統的搜索框往往比較笨重，難以適應現代網頁的設計趨勢。為了讓搜索框更加美觀、簡潔、易于使用，我們可以使用 CSS 來創建全新的搜索框。

下面是一個使用 CSS 創建搜索框的基本步驟：

1. 創建一個盒子，并設置盒子的樣式。可以使用 `div` 標簽來創建一個盒子，并使用 `border`、`margin`、`padding` 屬性來控制盒子的大小、位置和形狀。例如：

<div class="search-box">

<input type="text" placeholder="Search">

</div>

2. 為盒子添加文本和按鈕等元素。可以使用文本標簽 `input` 來創建一個輸入框，并使用按鈕標簽 `button` 來創建一個搜索按鈕。例如：

<div class="search-box">

<input type="text" placeholder="Search">

<button type="button" class="search-button">Search</button>

</div>

3. 為盒子添加樣式。可以使用 CSS 來調整盒子的顏色、字體、大小等屬性。例如：

.search-box {

border: 1px solid #ccc;

margin: 20px;

padding: 20px;

.search-box input {

border: none;

margin: 0;

padding: 0;

width: 100%;

.search-box input:placeholder {

color: #fff;

font-size: 24px;

.search-box .search-button {

background-color: #4CAF50;

color: #fff;

padding: 10px 20px;

border: none;

cursor: pointer;

以上是使用 CSS 創建搜索框的基本步驟，可以根據實際需求進行調整和修改。使用 CSS 創建搜索框不僅使得搜索框更加美觀、簡潔、易于使用，還能夠提高網頁的可讀性和用戶體驗。