MyBB Community Forums

Hello,

so i've updated my search box, made it look like the one from mybb, but i have two questions now.

1. The icon doesn't do any action, you can only search by pressing "enter" right now, how could i make it search on icon click too?

2. The second thing i want to do is something like this:

 (some ipb forum)

So instead of "All Content" and the dropdown, it should just expand that box and say "Advanced Search" which would link to "/search.php", if you click out of search box, the "Adv. Search" button should disappear again.

----------------------------------------------------------------------------------------
Now to the codes of my current search box:



header_quicksearch

            <form action="{$mybb->settings['bburl']}/search.php" method="post">
            <fieldset id="search">
               <input name="keywords" type="text" class="textbox" placeholder="Search Forums" />
                <i class="fa fa-search search_icon"></i><input value="" type="submit" class="search_icon" />
                <input type="hidden" name="action" value="do_search" />
                <input type="hidden" name="postthread" value="1" />
                </fieldset>
                </form>

Css

#search input.textbox {
    border-color: #A5A5A5;
	margin: -10px 5px 0 0;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    line-height: 16px;
    display: inline-block;
    width: 200px;
}
.search_icon {
    background: none;
    cursor: pointer;
    margin-left: -28px;
    padding: 0;
    border: 0;
    display: inline-block;
    color: #747474;
}
#search {
    border: 0;
    padding: 0;
    margin: 0;
    float: right;
    display: block;
}

Thanks for any help, if you gonna help, please use the above code. I appreciate your help!

Try this css:

#search input.textbox {
    border: 0;
    padding: 0;
    margin: 0;
    width: 175px;
    font-size: 0.9em;
}
.search_icon {
width: 24px;
    height: 24px;
    margin: 0;
    padding: 0;
    border: 0;
    background: url(https://mybb.com/assets/images/search.png) no-repeat 4px 4px;
    text-indent: -1000em;
    cursor: pointer;
}
#search {
display: block;
    border: 1px solid #ddd;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    padding: 1px 1px 1px 5px;
    cursor: text;
}

That is original from this forum and it seems to work...

That messes it up. :s

no one?

You need to replace css you have with one I provided... Or please screenshout how it looks when that css is in it. So I can see what to fix. It works fine to me...

Well i used your css code, but it didnt work fine.
Maybe you could give your html (template) code too?

It's hard to troubleshoot without a live preview or using https://jsfiddle.net/, but for the search button not being clickable: the FontAwesome needs to be in the input instead of aligned alongside it.

<i class="fa fa-search search_icon"></i><input value="" type="submit" class="search_icon" />

<input value="&#xf002;" type="submit" class="search" style="font-family:sans-serif,FontAwesome" />

The reason I put sans-serif in as well (can be changed with your font of choice) is just an example. The FontAwesome unicode is in the value bit of the input. Putting another font alongside FontAwesome allows you to use regular text as well. Usually good for HTML5 placeholders though, so you can ignore it altogether if you want, in this case, and just use:

<input value="&#xf002;" type="submit" class="search" style="font-family:FontAwesome" />

Thank you very much, that worked! However it needs to be class="search_icon".

Does anyone have an answer for my second question?