Archived topic
Change text color at search box
7 replies · Started by Dung on April 30, 2019
Hi GP team,
I want to change the text color at search box and I find the CSS code at another topic:
.navigation-search input[type="search"],
.navigation-search input[type="search"]:active {
color: #3f3f3f;
background-color: #3f3f3f;
}But it did not work. I found out that it will change the background and text color when you hold click at the search box. Can you check it again on my site please. Thank you very much.
Hi there,
try including the element in focus ie
.navigation-search input[type="search"],
.navigation-search input[type="search"]:active,
.navigation-search input[type="search"]:focus {
color: #3f3f3f;
background-color: #3f3f3f;
}It finally worked. Thank you so much David.
Glad to be of help
Hi GP team,
Can we add text on search box like the youtube search box (something like a guide text: type to search...).? When we click to search button and search box appear with the text, then we type something over it.
Hope to get your support.
P/S: just let you know I am using this php code to auto clear search box after searching:
add_filter( 'generate_navigation_search_output', function() {
return sprintf( // WPCS: XSS ok, sanitization ok.
'<form method="get" class="search-form navigation-search" action="%1$s">
<input autocomplete="off" type="search" class="search-field" value="" name="s" title="%2$s" />
</form>',
esc_url( home_url( '/' ) ),
esc_attr_x( 'Search', 'label', 'generatepress' )
);
} );Hi there,
Try changing your function to this:
add_filter( 'generate_navigation_search_output', function() {
return sprintf( // WPCS: XSS ok, sanitization ok.
'<form method="get" class="search-form navigation-search" action="%1$s">
<input placeholder="Type to search" autocomplete="off" type="search" class="search-field" value="" name="s" title="%2$s" />
</form>',
esc_url( home_url( '/' ) ),
esc_attr_x( 'Search', 'label', 'generatepress' )
);
} );Let me know :)
Thank you Tom, it worked very nice.
You're welcome :)
