• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

Removing/changing the search icon from the search bar

vexx

Active member
#1
Hey guys,

I want to customize a bit the search field from the navbar and while I found everything I need to modify, I can't seem the find that small magnifying glass icon from the start of the search field.

can you guys throw me a hint? tnx alot
 

vexx

Active member
#5
so isn't there a function that calls it? so I can delete it and build another one via css?

sorry for all these questions Brogan...i'm new to XF and tnx for the help btw :)
 

Chris D

XenForo developer
Staff member
#6
There is no function that calls it.

It is automatically added by HTML5. It isn't generated by XenForo. It's entirely a browser thing. It is not removable via CSS.
 

vexx

Active member
#8
ah..understood. ok then, I have a final question. I wanted to replicate the search bar in XF to the WP installation I use as CMS for XF..so now my quest is to find this search icon..I looked it up on iconfinder but with no luck (or maybe I didn't see it). Is there any way I can find this icon?

tnx alot guys..really appreciate it
 

Chris D

XenForo developer
Staff member
#9
Actually you can remove the icon by changing the type of the input.

Instead of:
Code:
type="search"
use

Code:
type="text"
Whereas this is correct, you may end up with styling issues.

The best solution is to remove:

Code:
results="0"
But, in terms of customising it, this cannot be done. Removing it is possible this way... but is it worth it?
 

Chris D

XenForo developer
Staff member
#10
ah..understood. ok then, I have a final question. I wanted to replicate the search bar in XF to the WP installation I use as CMS for XF..so now my quest is to find this search icon..I looked it up on iconfinder but with no luck (or maybe I didn't see it). Is there any way I can find this icon?

tnx alot guys..really appreciate it
The element for the search box will look something like this:

Code:
<input type="text" name="search" id="search" class="search_box" />
Change the type attribute to "search" and add a results attribute with a value of "0", e.g.

Code:
<input type="search" results="0" name="search" id="search" class="search_box" />
(This is just an example, not necessarily a suggestion to replace the entire WordPress search input box)
 

vexx

Active member
#12
however, it seems that's only valid in Chrome...Firefox doesn't see this at all. I know that's a bit offtopic..but is there any fix/tweak for FF?
 

Chris D

XenForo developer
Staff member
#13
however, it seems that's only valid in Chrome...Firefox doesn't see this at all. I know that's a bit offtopic..but is there any fix/tweak for FF?
No. It's very very browser specific.

It will only work in certain browsers. Webkit browsers such as Chrome and Safari will see it. Other browsers won't.