<div class="filter checkbox-filter js-openable-filter<%=' closed' unless facet_has_any_selected_values?(select_facet.key) %>" tabindex="0">
  <div class="head">
    <span class="legend"><%= select_facet.name %></span>
    <div class="controls">
      <a class="clear-selected<%=' js-hidden' unless facet_has_any_selected_values?(select_facet.key) %>">clear</a>
      <div class="toggle"></div>
    </div>
  </div>
  <div class="checkbox-container">
    <div class='js-auto-height-inner'>
    <% select_facet.allowed_values.each do | option | %>
      <input type="checkbox" name="<%=select_facet.key%>[]" value="<%= option['value']%>" id="<%= option['value']%>" <%= input_checked(select_facet.key, option['value']) %> aria-controls="js-search-results-info">
      <label for='<%= option['value']%>'><%= option['label']%></label>
    <% end %>
    </div>
  </div>
</div>



<div class="filter checkbox-filter js-openable-filter<%=' closed' unless facet_has_any_selected_values?(select_facet.key) %>" tabindex="0">
  <div class="head">
    <span class="legend"><%= select_facet.name %></span>
    <div class="controls">
      <a class="clear-selected<%=' js-hidden' unless facet_has_any_selected_values?(select_facet.key) %>">clear</a>
      <div class="toggle"></div>
    </div>
  </div>
  <div class="checkbox-container">
    <div class='js-auto-height-inner'>
    <% select_facet.allowed_values.each do | option | %>
      <label for='<%= option['value']%>'>
        <input type="checkbox" name="<%=select_facet.key%>[]" value="<%= option['value']%>" id="<%= option['value']%>" <%= input_checked(select_facet.key, option['value']) %> aria-controls="js-search-results-info">
        <%= option['label']%>
      </label>
    <% end %>
    </div>
  </div>
</div>



Move inputs to inside labels
Move inputs to inside labels

So that the whole thing is clickable, but the inputs inside the labels.
