Search field magnifying glass / cancel icons

Community Forums Forums Design Tips and Tricks Search field magnifying glass / cancel icons

This topic is: not resolved

This topic contains 4 replies, has 2 voices, and was last updated by  exelexys 4 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #100703

    exelexys
    Member
    Post count: 51

    Using Bill Erickson’s Genesis 404 plugin to create a search form via his [genesis-404-search] shortcode. When typing in the search field, an X is displayed at the right side of the field essentially over the magnifying glass icon which is part of the field:

    For some reason, the magnifying glass icon doesn’t appear to be functional (clicking it either with or without text in the search field does nothing), but clicking on the X clears the search field. Ideally, the magnifying glass icon would be separated from the cancel icon and initiate a search when clicked with text in the search field.

    Does anyone know if this behavior is common to WordPress search fields and how to remove the magnifying glass icon to prevent confusion?

    Many thanks in advance.

    http://is.gd/YIn8Lb
    #100713

    Lauren @ OnceCoupled
    Member
    Post count: 586

    That icon is just identifying the input area as a search form. It’s a background image, which you could remove by editing your stylesheet. Your search submit buttons are styled to not display.

    Best,
    Lauren


    I do custom WordPress work! http://oncecoupled.com
    Contact me directly: lauren@oncecoupled.com

    #100729

    exelexys
    Member
    Post count: 51

    Thanks for the tips.

    Any idea how to make the magnifying glass icon disappear when text is the search field so the cancel icon is clearly visible?

    Thanks!

    #100734

    Lauren @ OnceCoupled
    Member
    Post count: 586
    .search-form input[type="search"]:focus {
         background-image: none;
    }

    Cheers,
    Lauren


    I do custom WordPress work! http://oncecoupled.com
    Contact me directly: lauren@oncecoupled.com

    #100873

    exelexys
    Member
    Post count: 51

    Perfect. Thanks very much!

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.