1

使命

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

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

off

:hover

:focus

对于这些状态中的每一个，我都需要三个不同的 DIV id。

搜索的文本字段细节

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

搜索的按钮细节

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

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

我目前的搜索表格和网站可以在criticear上看到

自从我从 ottodestruct 的 WordPress 线程评论教程中获得代码以来，我已经能够使我的评论表单文本字段具有我上面提到的 3 种状态。

问题是我不太明白如何获取此评论表单 css 并将其应用于我的搜索文本字段和按钮。您可以在我的博客评论家的单个帖子页面上查看我的评论表

这是我的搜索表单 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>

这是我在我的搜索表单 php 调用header.php：

    <?php get_search_form(); ?>

如果您有任何问题或需要更多信息，请告诉我。我希望你能帮忙。谢谢。

4

1 回答 1

1

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

首先，您不需要“这 3 个状态中的每一个都有 3 个不同的 DIV id”。:hoverCSS 有and的伪选择器: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 */
于 2009-08-20T17:13:20.423 回答