Search field magnifying glass / cancel icons

[exelexys]

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

[Lauren @ OnceCoupled]

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

---

We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com

[exelexys]

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!

[Lauren @ OnceCoupled]

.search-form input[type="search"]:focus {
     background-image: none;
}

Cheers,
Lauren

---

We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com

[exelexys]

Perfect. Thanks very much!

[Author]

Posts