[Resolved] Styling the Reset Button in my Search Form

[Author]

Posts

[andrewF-6]

Tell us what you are trying to do?
I would like my Reset Button to mimic the styling and behaviour of my Submit button.

Is there any documentation that you are following?
https://toolset.com/forums/topic/search-styling/ - but this doesn't exactly apply.

Is there a similar example that we can see?
hidden link - you can view the styling and function of the Submit button. How can I get my Reset button to look and behave the same way on hover?

What is the link to your site?
hidden link

[Beda]

It requires custom HTML and CSS, and Toolset Support cannot provide this.

We can provide information how to apply the Custom HTML and CSS in Toolset, or hint to possible solutions, but to use Toolset, deep knowledge of HTML and CSS are a requirement, that is why it's not subject to main support.

I see on the link (hidden link) the submit and reset button look pretty much the same already, meaning you succeeded addressing the right HTML with the right CSS.

I see that submit button does not change color on hover, while Reset does.
That is usually done with :hover CSS rules, so you can add related hover rules in the CSS section of the Views Search and Pagination editor, just below it is the CSS section, where you can add this.

You can also give your buttons (which are inserted in the View Search and Pagination section with Toolset ShortCodes) special CSS classes, so you can later on, address those with your Custom CSS.

For example, you can choose a custom inline style, and class, to be added to the submit or reset buttons (which can be HTML inputs or buttons):
[wpv-filter-reset output="bootstrap" class="myclass" style="color:red;"]
[wpv-filter-submit output="bootstrap" class="my class" style="etc"]

With this, you can for example, give both the same class and input type, then they can be addressed with the same CSS
Or you can add inline styles, or separate classes or even many at once, to address more singular the items.

I hope this helps, please let me know if something remains unclear.

[andrewF-6]

My issue is resolved now.

Thanks to your advice I located the :hover css and was able to style the hover state of my reset button to mimic the submit button. This was the code I used.

/* Mimic Submit Hover in Reset Button*/
input.btn:hover {
  color: #fff;
  background-color: #5a6268;
  border-color: #545b62;
  text-decoration: none;
  z-index: 1;
}

Thank you!