[Resolved] Change text color at search box

Home Forums Support Change text color at search box

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #883951
    Dung

    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.

    #884044
    David
    Staff
    Customer Support

    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;
    }
    #884045
    Dung

    It finally worked. Thank you so much David.

    #884047
    David
    Staff
    Customer Support
    #896808
    Dung

    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' )
        );
    } );
    #897042
    Tom
    Lead Developer
    Lead Developer

    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 πŸ™‚

    #897369
    Dung

    Thank you Tom, it worked very nice.

    #898057
    Tom
    Lead Developer
    Lead Developer
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.