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. – user20765 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? – user20765 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. – user20765 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