[Resolved] Styling the filter search bar and search button

[Author]

Posts

[vietN]

Tell us what you are trying to do?
Styling the filter search bar and search button

Is there a similar example that we can see?
View attached tooletset website search bar. I'd like to achieve exactly the same.

[Jamal]

Hello and thank you for contacting Toolset support.

The styles depend heavily on the used theme. Can you share a URL where we can see the search form? We'll check what theme you are using and we'll do our best to help you achieve that.

If you would like to allow us temporary access as an administrator, that will help us test any custom CSS code to use. Your next reply will be private to let you share credentials safely. ** Make a database backup before sharing credentials. **

[Jamal]

Because you are already using FontAwesome, we can add an icon next to the input and trigger the form submit when it is clicked.

Custom Javascript code that will create the icon and trigger the form submit when clicked:

jQuery(function($){
    // create the icon
    $( '<i class="fa fa-search"></i>' ).insertBefore( $( 'input[name="wpv_post_search"]' ) );
    // listen for clicks
    $('i.fa.fa-search').on('click', function(){
        $(this).closest('form').submit();
    })
})

And custom CSS code to make it appear at the right of the search input:

i.fa.fa-search {
    position: absolute;
    display: block;
    z-index: 2;
    cursor: pointer;
    height: 20px;
    width: 20px;
    right: 7px;
    padding-top: 14px;
}

I hope this makes sense. Let me know if you have any questions.

[vietN]

Thanks for the great support.

I've tried to resize the search box in the custom CSS but the search icon now sits outside the box (see attachement)

input[type="text"] {
background: #f5f5f5;
max-width: 500px;
}

Seems that the search icon "sticks" to the right side if the view port. Would it be possible to have it stick to the search bar?

Thanks.

[Jamal]

Well, that's not really simple, because it needs to have styles in different parts of the page. I finally managed to get it working. You might need to adjust the top and right properties of the icon. The following codes did it:

.has-feedback label ~ .form-control-feedback {
    top: 25px;
}
.form-control-feedback {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    display: block;
    width: 34px;
    height: 34px;
    line-height: 34px;
    text-align: center;
} 
.has-feedback {
    position: relative;
}
.form-group.has-feedback {
    max-width: 50%;
    margin: 0 auto;
}
input[type="text"]:focus {
box-shadow: none;
}

jQuery(function($){
    $('<span class="fa fa-search form-control-feedback"></span>').insertAfter('.js-wpv-filter-trigger-delayed');
    $('.js-wpv-filter-trigger-delayed').closest('.form-group').addClass('has-feedback')
    
    $('span.fa.fa-search').on('click', function(){
   jQuery(this).closest('form').submit();
})
})

Please note that this custom code and is therefore out of the scope of the support forum. If you need further adjustment, consider hiring a developer. Maybe one of our contractors https://toolset.com/contractors/
https://toolset.com/toolset-support-policy/