在網頁中搜索框是一個常用的元素。在CSS中,我們可以使用一些技巧來實現一個漂亮的搜索框樣式。下面,我們來看看如何實現呢:
/* 創建搜索框容器 */ .search-container { position: relative; width: 300px; } /* 設置搜索框樣式 */ .search-box { padding: 10px; border: none; border-radius: 5px; width: 100%; font-size: 16px; background-color: #f2f2f2; } /* 創建搜索按鈕 */ .search-button { position: absolute; right: 0; top: 0; padding: 10px; border: none; border-radius: 0 5px 5px 0; background-color: #4CAF50; color: #fff; cursor: pointer; }
以上代碼中,我們首先創建了搜索框容器,通過設置position屬性為相對定位(relative)來確保搜索按鈕可以相對于容器定位。容器的寬度設置為300像素,你可以根據需要來修改。
接著,我們設置了搜索框的樣式。通過設置padding、border-radius、背景顏色等屬性來呈現漂亮的樣式。同時我們也設置了搜索框的寬度為100%來讓其充滿整個容器。
最后,我們創建了搜索按鈕。通過設置position屬性為絕對定位(absolute)來確保其可以定位在容器的右上角。通過設置padding、border-radius、背景顏色等屬性來呈現漂亮的樣式。同時,我們也將光標的樣式設置為手型,方便用戶點擊。
通過以上的CSS樣式,我們可以實現一個簡單而漂亮的搜索框。你可以將其嵌套在你的網頁中,為用戶提供便捷的搜索功能。在實際應用中,你可以根據需要調整搜索框的樣式,例如增加動畫效果等。
上一篇css的標簽選擇符