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中，然后还可以通过修改上面的几个百分比数字修改调用位置和大小。

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

以上就是今天给大家分享的内容，希望对您有用。