I would like to add custom css classes to specific views exposed filters. Is this possible either by default or with some Drupal module?

UPDATE: Please, note that I am not referring to the views exposed filters form in general, but individual filters, eg. a class to a date filter, another class to an entity reference filter, etc.

  • You can always use css parent child relationship in selectors to identify exposed filter uniquely. – Anil Sagar Jan 17 '14 at 15:09
  • Yes of course I know. But the designer asked me if I could directly assign css classes to filters for easier handling and shorter css rules, and I found it strange that drupal does not provide such functionality for filters. Moreover, some ones may need to get grouped somehow by assigning the same css class. – Maria Ioannidou Jan 17 '14 at 15:20

Have you considered something like this?

`.view-[viewname] .views-exposed-widgets`

You could use:

theme_form_alter(&$form, &$form_state, $form_id)

Check for the view/form id, and then add classes:

$form['#attributes']['class'][] = 'test';
  • Nice approach. However, if it is not possible with an easier way I think I would go for javascript, sth like: $(".views-exposed-form #edit-ef-search-wrapper label").addClass('icon-ef_search'); Do you think that it is OK or are there any drawbacks on using javascript instead of theme hooks for such functionality? – Maria Ioannidou Jan 17 '14 at 17:06

I achieved this by opening up the page with the exposed filters that i'm interested in... I found that Drupal adds a class that is without any style... For me, I added this because i wanted to put some filters on their own line:

.views-widget-filter-field_application_nid {
width: 100%;

Hope that helps... :)

  • As I mentioned in my comment at my question above, the problem is not how to identify the element with css selectors, but I would like to add my own css classes to filter elements, if it is possible. – Maria Ioannidou Jan 20 '14 at 9:26
  • Apologies... I read it as you wanted to add some styling to the filters... – gMaximus Jan 20 '14 at 13:25

You could use

function theme-name_form_alter(&$form, &$form_state, $form_id) {  

  if ($form_id=='views_exposed_form') { 
    $view = $form_state['view'];
    if ($view->name == 'view-name') {
        $form['#attributes']['class'][] = 'class-here';        

Here you need to use your own

- theme name
- view name
- class

Hope this helps.


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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