I have two instances of the Search form in one page. The search field needs to have different CSS classes in each instance.

Instance 1:

<input type="text" class="form-control input-foo" placeholder="Search">

Instance 2:

<input type="text" class="form-control input-bar" placeholder="Search">

All the relevant theme templates and preprocess functions that I can find to edit the classes output on the field, apply to both instances. E.g. input--search.html.twig.

For the time being I have instead applied a class on the block that each of these forms is contained in, but I'd like to know if there's another solution.

1 Answer 1


Is there a reason having the class on the input would be better than having it on the block? e.g. does it make some CSS/JS awkward by not being able to target the input directly?

If not, having the class on the block seems like the ideal solution both in terms of ease-of-development and semantics...you want the search input to be styled based on where it is. That feels like a natural separation for a hierarchy of selectors: .block .input

If the blocks are in different regions, you could use the region class instead, which is there by default in most themes; that would avoid even having to alter the blocks themselves.

  • I'd like to minimise the dependence of my css on the structure of the page around it, something which I've learnt to be good SMACSS practice. Also - it bugs me not knowing how to do this!
    – Leo Pitt
    Commented Jun 20, 2017 at 6:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.