搜索框是許多網頁設計中不可或缺的元素,而一個好看的搜索框更能為網頁增添美觀與功能性。這里將介紹如何在CSS中實現一個漂亮的搜索框。
首先,在HTML中我們需要新建一個輸入框和一個按鈕:
<form class="search-form" action="#" method="get"> <input type="text" class="search-box" name="searchBox" placeholder="請輸入關鍵詞"> <button type="submit" class="search-btn" name="searchBtn">搜索</button> </form>其中,class可以自行按照需求設計。 接下來,在CSS中,我們需要將搜索框和按鈕進行美化:
.search-box{ width: 300px; height: 30px; font-size: 16px; border: 1px solid #ccc; border-radius: 15px; outline: none; padding-left: 15px; } .search-btn{ width: 80px; height: 30px; font-size: 16px; color: #fff; background-color: #f00; border: none; border-radius: 15px; cursor: pointer; margin-left: -5px; } .search-btn:hover{ background-color: #f66; } .search-form{ display: flex; justify-content: center; align-items: center; }這里的CSS通過修改搜索框和按鈕的寬度、高度、字體大小、背景顏色、邊框等樣式來實現美化。而搜索框的圓角效果和按鈕的hover效果更為細致,能夠提升整個搜索框的觀感。 最后,在整個樣式中,搜索框和按鈕都放在一個class為search-form的容器中,并通過flex布局使其水平居中。這樣,整個搜索框看起來更加協調美觀。 綜上所述,通過適當的CSS修飾,我們可以輕松地實現一個漂亮的搜索框。通過靈活發揮自己的設計能力,搜索框不僅具有較好的觀感效果,也能增加網頁的實用性與用戶體驗。