検索窓の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;
}
- トピック「検索窓のplaceholderの指定について」には新たに返信することはできません。