CSS搜索框是一個常用的網站或應用程序中必需的功能之一,因為它可以方便用戶搜索他們所需要的內容。下面,我們來看一下如何使用CSS創建一個搜索框。
<div class="search-box"> <input type="text" placeholder="搜索內容"> <button>搜索</button> </div>
以上代碼將創建一個包含輸入框和搜索按鈕的搜索框。現在,我們需要使用CSS來樣式化它。
.search-box { display: flex; align-items: center; justify-content: center; } input[type="text"] { width: 250px; height: 40px; padding: 10px; border-radius: 20px; border: none; outline: none; font-size: 18px; } button { width: 100px; height: 40px; margin-left: 20px; border-radius: 20px; border: none; outline: none; background-color: #007bff; color: #fff; font-size: 18px; }
CSS代碼中,我們使用了flex布局讓搜索框在水平方向上居中對齊,并把輸入框和搜索按鈕垂直居中對齊。我們還使用了一些樣式屬性來美化搜索框,例如設置輸入框的圓角、字體大小、背景顏色等等。
至此,我們創建了一個簡單而美觀的搜索框。還可以根據實際需要進行修改,例如調整大小、改變顏色等等,以滿足不同場景下的使用需求。