CSS for individual search forms

Ross Moderator

#7255

Hey Paul

Currently you cannot create a completely separate form, but you can style it with CSS.

I just had a look at the code and could have sworn each search form gets its own ID – but they don’t, so to style individual search forms use the following CSS (substituting the ID):

form[data-sf-form-id="824"]
{
    border:1px solid #f00;
}

If of course you are using the same form in different locations you would need to check the DOM and structure of your site.. but in general in WP the homepage has a home class on the body tag so you could target the homepage specifically like:

.home form[data-sf-form-id="824"]
{
     border:1px solid #0f0;
}

And again, depending on your theme, it is common to attach a class to the body tag with page id.. so you could target search forms on specific pages like this:

.page-id-113 form[data-sf-form-id="824"]
{
    border:1px solid #00f;
}

Hope that helps 🙂

Anonymous

#7342

Yeah that kind of helped but I am still struggling…

But maybe I wasn’t explicit enough. I have a unique form (id=6080) and I can manipulate the basic form css but what I want to do is manipulate the two elements in the form. At the moment the dropdown is too short and the button always appears under the dropdown. I would like to increase the width of the dropdown and then position the submit button to the right of the drop down so it is all in one line.

Any edits I attempt using Firebug are affecting the search&filter widget in the sidebar.

Any suggestions?

[Author]

Posts