Wrap the search form fielded search select in a input-group-addon

app/assets/stylesheets/blacklight/_header.scss

@@ -20,13 +20,28 @@
 #search-navbar {
   z-index: 1;
 
-  .search-query-form {
-    @extend .col-md-8;
-    padding-left: 0;
+  .input-group {
+    width: 100%;
+  }
+
+  .input-group-addon {
+    &.for-search-field {
+      background-color: $input-bg;
+      border-radius: $border-radius-base 0 0 $border-radius-base;
+      width: 100px;
+      width: 15ch;
+    }
+
+    select {
+      border: none;
+      background: transparent;
+    }
   }
 
   .search-query-form {
+    @extend .col-md-8;
     border: 0;
+    padding-left: 0;
   }
   .submit-search-text {
     // hide 'search' label at very small screens

app/views/catalog/_search_form.html.erb

@@ -1,20 +1,24 @@
-  <%= form_tag search_action_url, :method => :get, :class => 'search-query-form clearfix navbar-form' do %>
-    <%= render_hash_as_hidden_fields(params_for_search().except(:q, :search_field, :qt, :page, :utf8)) %>
+<%= form_tag search_action_url(controller: 'catalog'), method: :get, class: 'search-query-form clearfix navbar-form', role: 'search' do %>
+  <%= render_hash_as_hidden_fields(params_for_search().except(:q, :search_field, :qt, :page, :utf8)) %>
 
-    <% unless search_fields.empty? %>
-      <label for="search_field" class="sr-only"><%= t('blacklight.search.form.search_field.label') %></label>
-      <%= select_tag(:search_field, options_for_select(search_fields, h(params[:search_field])), :title => t('blacklight.search.form.search_field.title'), :class=>"search_field form-control") %>
-      <span class="sr-only"><%= t('blacklight.search.form.search_field.post_label') %></span>
+  <div class="input-group">
+    <% if search_fields.length > 1 %>
+      <span class="input-group-addon for-search-field">
+        <label for="search_field" class="sr-only"><%= t('blacklight.search.form.search_field.label') %></label>
+        <%= select_tag(:search_field, options_for_select(search_fields, h(params[:search_field])), title: t('blacklight.search.form.search_field.title'), id: "search_field", class: "search_field") %>
+      </span>
+    <% elsif search_fields.length == 1 %>
+      <%= hidden_field_tag :search_field, search_fields.first.last %>
     <% end %>
-    <div class="input-group search-input-group">
-        <label for="q" class="sr-only"><%= t('blacklight.search.form.search.label') %></label>
-         <%= text_field_tag :q, params[:q], :placeholder => t('blacklight.search.form.search.placeholder'), :class => "search_q q form-control", :id => "q", :autofocus => should_autofocus_on_search_box? %>
 
-      <span class="input-group-btn">
-        <button type="submit" class="btn btn-primary search-btn" id="search">
-          <span class="submit-search-text"><%=t('blacklight.search.form.submit')%></span>
-          <span class="glyphicon glyphicon-search"></span>
-        </button>
-        </span>
-      </div>
-  <% end %>
+    <label for="q" class="sr-only"><%= t('blacklight.search.form.search.label') %></label>
+    <%= text_field_tag :q, params[:q], placeholder: t('blacklight.search.form.search.placeholder'), class: "search_q q form-control", id: "q", autofocus: should_autofocus_on_search_box?  %>
+
+    <span class="input-group-btn">
+      <button type="submit" class="btn btn-primary search-btn" id="search">
+        <span class="submit-search-text"><%= t('blacklight.search.form.submit') %></span>
+        <span class="glyphicon glyphicon-search"></span>
+      </button>
+    </span>
+  </div>
+<% end %>