下面是一個簡單的CSS樣式搜索框代碼示例:
以上代碼將創(chuàng)建一個搜索框和一個搜索按鈕,輸入框和按鈕都將根據(jù)CSS樣式居中顯示。輸入框有圓角邊框,而按鈕則具有綠色背景和白色文字。這個簡單的搜索框代碼可以輕松地嵌入網(wǎng)站頁面中,以提供響應(yīng)式搜索解決方案。
<!--HTML 代碼--> <form class="search-form"> <input type="text" name="search" placeholder="搜索..."> <button type="submit">搜索</button> </form> <!--CSS 代碼--> .search-form { display: flex; justify-content: center; align-items: center; } .search-form input[type="text"] { padding: 10px; font-size: 16px; border: none; border-radius: 5px 0 0 5px; } .search-form button[type="submit"] { padding: 10px; background-color: #4CAF50; color: white; border: none; border-radius: 0 5px 5px 0; }
以上代碼將創(chuàng)建一個搜索框和一個搜索按鈕,輸入框和按鈕都將根據(jù)CSS樣式居中顯示。輸入框有圓角邊框,而按鈕則具有綠色背景和白色文字。這個簡單的搜索框代碼可以輕松地嵌入網(wǎng)站頁面中,以提供響應(yīng)式搜索解決方案。