1

ミッション

WordPress ブログの検索フィールドとボタンをカスタマイズしたいと考えています。

私が考えている検索テキストフィールドとボタンには、次の 3 つの状態があります。

off

:hover

:focus

これらの州ごとに 3 つの異なる DIV ID が必要です。

検索のテキスト フィールドの仕様

さらに、検索のテキスト フィールドに最初に読み込まれたテキスト「検索サイト」が必要です。ユーザーが検索のテキスト フィールドをクリックすると、最初のテキストが消え、ユーザー カーソルが点滅して表示されます。ユーザーは検索キーワードを入力できます。キーワードを入力した後、たまたま検索のテキスト フィールドをクリックしても、キーワードはそのままテキスト フィールドに残ります。キーワードを削除して検索のテキスト フィールドをクリックすると、「検索サイト」というテキストが再び表示されます。

検索ボタンの仕様

検索ボタンには、垂直方向と水平方向の中央に「検索」というテキストが必要です。

検索テキスト フィールドとボタンの現在の状態

私の現在の検索フォームとサイトは、ここの批評家で見ることができます

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>

これが私が持っているsearchform php呼び出しですheader.php：

    <?php get_search_form(); ?>

ご不明な点がございましたら、お気軽にお問い合わせください。お役に立てれば幸いです。ありがとう。

4

1 に答える 1

1

CSS を使用して必要に応じてフォームのスタイルを設定し、JavaScript または JavaScript ライブラリ (jQuery など) を使用して、探しているフォーカス/ぼかし効果を作成する必要があります。私はあなたのためにすべてをするつもりはありませんが、正しい方向にあなたを向けるだけです.

まず、「これら 3 つの状態のそれぞれに 3 つの異なる DIV ID」は必要ありません。:hoverCSS にはとの疑似セレクターが: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とsearchbuttonHTML が必要以上に冗長になるということです。HTML で個別に宣言しなくても、CSS でこれらのフィールドに簡単にアクセスできます。

#searchform input[name=s] { } /* use this instead of .searchfield */
#searchform input[type=submit] { } /* use this instead of .searchbutton */
于 2009-08-20T17:13:20.423 に答える