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

Discussion in 'Styling and Customization Questions' started by vexx, Mar 18, 2013.

  1. vexx

    vexx Active Member

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

    Brogan XenForo Moderator Staff Member

    That's built in to the browser.
     
  3. vexx

    vexx Active Member

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

    Brogan XenForo Moderator Staff Member

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

    You can't modify/style it.
     
  5. vexx

    vexx Active Member

    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 :)
     
  6. Chris D

    Chris D XenForo Developer Staff Member

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

    Fuhrmann Well-Known Member

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

    Instead of:
    Code:
    type="search"
    use

    Code:
    type="text"
     
    Chris D likes this.
  8. vexx

    vexx Active Member

    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
     
  9. Chris D

    Chris D XenForo Developer Staff Member

    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?
     
    Fuhrmann and Shelley like this.
  10. Chris D

    Chris D XenForo Developer Staff Member

    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)
     
    Fuhrmann likes this.
  11. vexx

    vexx Active Member

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

    vexx Active Member

    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?
     
  13. Chris D

    Chris D XenForo Developer Staff Member

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

    vexx Active Member

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

    tnx alot guys :D
     

Share This Page