wordpress建站教程：修改BLOCKSY主題的默認搜索框樣式

繼續分享wordpress建站教程。有些wordpress主題自帶的搜索都是那種全屏彈窗樣式的，如上圖所示，當我們點擊搜索時它會出現一整塊半透明的全屏搜索彈窗（透明度可調），其實個人感覺這樣挺好，就用它默認的樣式就行了。但是也有部分用戶會覺得這種搜索樣式不好，所以我們有時可能會需要修改這個搜索框樣式，下面就分享方法。

方法一：用代碼替換

wordpress建站教程：給導航欄添加默認搜索框

悅然wordpress建站之前分享過一個方法，可以移除主題的搜索框，然后直接在wordpress建站主題的function.php文件中添加代碼，這樣會在導航欄多出一個默認搜索框，方法查看上面的教程。

方法二：使用CSS修改

大多數用戶是不太喜歡那種全屏的搜索樣式，所以我們可以修改通過下面的CSS代碼來修改搜索框的大小和透明度。

/*blocksy搜索框彈出背景CSS*/
[data-header*="type-1"] #search-modal {
    top: 15%;
    left: 25%;
    right: 25%;
    bottom: 55%;
    background-color: rgba(18, 20, 26, 0.85);
}

這里就以BLOCKSY主題為例，大家可以直接把上面的CSS代碼添加到主題自定義的額外CSS中，然后還可以通過修改上面的幾個百分比數字修改調用位置和大小。

修改之后的搜索框效果如上圖所示。

以上就是今天給大家分享的內容，希望對您有用。