サポート » 使い方全般 » 検索窓のplaceholderの指定について

  • お世話になります。
    検索フォームのplaceholderの文字を、入力する際、消えるように設定したいのですが、
    どのように、placeholderを指定すればよろしいでしょうか?
    コンタクトフォームのテキストフォームは、反映されているのですが、
    検索フォームだけ、スタイルが効きません。
    別途、searchform.phpファイルを作る必要があるのでしょうか?
    ご教示いただければ幸いです。

    【general-template.phpの記述】

    $form = ‘<form role=”search” ‘ . $aria_label . ‘method=”get” class=”search-form” action=”‘ . esc_url( home_url( ‘/’ ) ) . ‘”>
    <label>
    <span class=”screen-reader-text”>’ . _x( ‘Search for:’, ‘label’ ) . ‘</span>
    <input type=”search” class=”search-field” placeholder=”search” value=”search” name=”s” />
    </label>
    <input type=”submit” class=”search-submit” value=”search” />
    </form>’;
    } else {
    $form = ‘<form role=”search” ‘ . $aria_label . ‘method=”get” id=”searchform” class=”searchform” action=”‘ . esc_url( home_url( ‘/’ ) ) . ‘”>
    <div>
    <label class=”screen-reader-text” for=”s”>’ . _x( ‘Search for:’, ‘label’ ) . ‘</label>
    <input type=”text” value=”‘ . get_search_query() . ‘” name=”s” id=”s” />
    <input type=”submit” id=”searchsubmit” value=”‘ . esc_attr_x( ‘Search’, ‘submit button’ ) . ‘” />
    </div>
    </form>’;

    【以下css記述】

    input[type=”text”],
    input[type=”email”],
    input[type=”url”],
    input[type=”password”],
    input[type=”search”],
    textarea {
    color: #252525;
    }
    input[type=”text”]:focus,
    input[type=”email”]:focus,
    input[type=”url”]:focus,
    input[type=”password”]:focus,
    input[type=”search”]:focus,
    textarea:focus {
    color: #252525;
    }

    input::placeholder {
    color: #5c5c5c;
    }

    input:focus::placeholder,
    textfield:focus::placeholder {
    color: transparent;
    transition: .1s;
    }

    input:focus::placeholder,
    textarea:focus::placeholder {
    color: transparent;
    transition: .1s;
    }

    input:focus::-webkit-input-placeholder,
    textarea:focus::-webkit-input-placeholder {
    color: transparent;
    transition: .1s;
    }

    input:focus:-moz-placeholder,
    textarea:focus:-moz-placeholder {
    color: transparent;
    transition: .1s;
    }

    input:focus::-moz-placeholder,
    textarea:focus::-moz-placeholder {
    color: transparent;
    transition: .1s;
    }

2件の返信を表示中 - 1 - 2件目 (全2件中)
  • こんにちは

    提示された HTML と CSS だけであれば、検索窓(input)にフォーカスした時にプレースホルダーの文字は消える(color: transparent)と思います。
    他のスタイルが影響していたりするのではないでしょうか?実際のページで動作を確認できれば、もう少し状況がわかると思います。ここに URL を貼るのは難しいでしょうか?

    トピック投稿者 9-taro

    (@9-taro)

    ishitaka様

    早速、ご回答ありがとうございます。
    まだ未公開のサイトですので、こちらにリンクを貼るのは難しいですが、
    他のスタイルが干渉してるのかもしれないというご指摘は、調べてみます。
    因みに干渉してスタイルの調べ方って、あるのでしょうか?
    ブラウザの要素からスタイルを表示できますが、どれが干渉してるのか
    わからない状態です。

2件の返信を表示中 - 1 - 2件目 (全2件中)
  • トピック「検索窓のplaceholderの指定について」には新たに返信することはできません。