Removing/changing the search icon from the search bar

[vexx]

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

 

[Paul B]

That's built in to the browser.

 

[vexx]

erm...sorry, I didn't got that actually? what do you mean?

 

[Paul B]

It is part of the browser software, nothing to do with XenForo.

You can't modify/style it.

 

[vexx]

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]

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.

 

[Fuhrmann]

Actually you can remove the icon by changing the type of the input.

Instead of:

type="search"

use

type="text"

 

[vexx]

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]

Actually you can remove the icon by changing the type of the input.

Instead of:

type="search"

use

type="text"

Whereas this is correct, you may end up with styling issues.

The best solution is to remove:

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]

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:

<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.

<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]

ah..I resolved it..change it from <input type="text" to <input type="search"

 

[vexx]

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]

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.

 

[vexx]

ah..i see..well..that's it then.

tnx alot guys