Docs

[sharp-image]

Hi,

In a foooterwidget Ive setup a searchfield with code:

<p class="block3 footer-content"><form method="get" id="searchform" class="form-search center-text" action="https://forevermusic.nl">
              <label for="s" class="cfc-h-tx tt-upper"></label>
              <input type="text" id="s" class="search-query cfc-h-tx center-text tt-upper" name="s" placeholder="Zoeken">
            </form> </p>

– The only problem I have is that the searchloop icon in the searchfield is not clickable for making a searchhit.
– And how can I move the searchloop icon to the right. Try this with a right 16px on the classes: .form-search:before, .widget_product_search form:before but that doesnt work.

Thanks
Bouke
https://forevermusic.nl

[Jade]

Hi Bouke,

Please add this code in the Custom JS:

$(function() {
    $( ".widget_text #searchform:before" ).on( "click", function() {
          $("form#searchform").submit();
    });
});

Then this code in the Custom CSS:

.widget_text #searchform:before {
    left: auto;
    right: 16px;
}

Hope this helps.

[sharp-image]

Hi Jade,

Seems that the JS code doesn’t make any changes to make from the search loop icon a fysical (hit) button.
I have add the JS code via: Custom — EDIT GLOBAL JS —

$(function() {
    $( ".widget_text #searchform:before" ).on( "click", function() {
          $("form#searchform").submit();
    });
});

As you can see the css update is working fine: https://forevermusic.nl

Thanks
BOuke

[Christopher]

Hi there,

Your HTML code is not quite right, please update it to :

<p class="block3 footer-content"><form method="get" id="searchform" class="form-search center-text" action="https://forevermusic.nl">
              <label for="s" class="cfc-h-tx tt-upper"></label>
              <input type="text" id="s" class="search-query cfc-h-tx center-text tt-upper" name="s" placeholder="Zoeken">
 <button type="submit">Search</button>
            </form> </p>

Please check following links too :

http://stackoverflow.com/questions/15314407/how-to-add-button-inside-input
https://blog.udemy.com/search-box-css/

Hope it helps.

[sharp-image]

Thanks, fixed!

[Prasant Rai]

You are most welcome. 🙂

[Author]

Posts