Question

团

我想在我的WordPress博客上自定义搜索字段和按钮。

我想到的搜索文本字段和按钮将有三种状态：

off

:hover

:focus

对于每种状态，我都需要有三种不同的DIV ID。

搜索文字字段细节

此外，我需要将搜索网站最初加载到搜索文本字段中。当用户点击搜索的文本字段时，初始文本将消失，用户光标将闪烁。然后，用户可以输入他们的搜索关键字。如果在输入关键字后他们碰巧点击搜索的文本字段，他们的关键字将保留在文本字段中。如果他们决定删除他们的关键字并点击搜索的文本字段，则会重新显示“搜索网站”文字。

搜索按钮细节

搜索按钮必须具有垂直和水平居中的文本“搜索”。

我的搜索文本字段和按钮的当前状态

我目前的搜索表单和网站可以在criticear

看到

由于我从ottodestruct的WordPress线程评论教程中获取了代码，因此我能够使我的注释表单文本字段具有上面提到的3种状态。

问题是我不太明白如何将这个评论形式的css应用到我的搜索文本字段和按钮。你可以在我的博客criticear的单个帖子页面上查看我的评论表格

这是我的搜索表单CSS：

/*
SEARCH FORM
*/

form#searchform
                    {
                    display:block;
                    width:255px;
                    height:20px;
                    position:absolute;
                    top:56px;
                    left:753px;
                    }

.searchbutton
                    {
                    color: #0066ff;
                    border: 0px solid;
                    display:block;
                    width:45px;
                    height:20px;
                    background: #d2e4ff;
                    position:absolute;
                    top:0px;
                    left:202px;
                    -moz-border-radius-bottomright: 4px;
                    -moz-border-radius-topright: 4px;
                    -webkit-border-bottom-right-radius: 4px;
                    -webkit-border-top-right-radius: 4px;
                    font-size: 12px;
                    }

.searchbutton:hover
                    {
                    background-color: #0066ff;
                    color: #ffffff;
                    font-size: 12px;
                    }

.searchfield
                    {
                    background:url(/images/search-field-shadow.png) top left repeat-x #666666;
                    color: #eeeeee;
                    border: 0px solid;
                    position: absolute;
                    top:0px;
                    left:0px;
                    display:block;
                    width:200px;
                    height:20px;
                    -moz-border-radius-bottomleft: 4px;
                    -moz-border-radius-topleft: 4px;
                    -webkit-border-bottom-left-radius: 4px;
                    -webkit-border-top-left-radius: 4px;
                    font-size: 12px;
                    }

这是我的searchform.php代码：

    <form method="get" id="searchform" action="<?php bloginfo('url'); ?>/">
   <input type="text" value="<?php the_search_query(); ?>" name="s" id="s" class="searchfield" />
   <input type="submit" id="searchsubmit" value="search" class="searchbutton"/>
</form>

以下是我header.php中的searchform php调用：

    <?php get_search_form(); ?>

如果您有任何问题或需要更多信息，请告知我们。我希望你能提供帮助。感谢。

Answer 1

您需要使用CSS来根据需要设置表单样式，并使用JavaScript或JavaScript库（如jQuery）来创建您正在寻找的焦点/模糊效果。我不打算为你做整件事，但我会指出你正确的方向。

首先，对于这3种状态中的每一种，你不需要“3种不同的DIV id”。 CSS具有:hover和:focus的伪选择器，所以这就是你所需要的。如果你遇到了这个问题或遇到浏览器问题，你总是可以使用JavaScript（我再推荐jQuery）。

对于输入框中的“搜索网站”效果，你将会做这样的事情（这是jQuery）：

$('input[name=s]').focus(function(){
    if ($(this).val() == 'Search site')
        $(this).val('');
});
$('input[name=s]').blur(function(){
    if ($(this).val() == '')
        $(this).val('Search site');
});

我要提到的最后一件事是你的CSS类searchfield和searchbutton使你的HTML比它需要的更冗长。您可以轻松访问CSS中的这些字段，而无需在HTML中单独声明它们：

#searchform input[name=s] { } /* use this instead of .searchfield */
#searchform input[type=submit] { } /* use this instead of .searchbutton */

如何自定义WordPress搜索表单？

1 个答案: