Skip to content

Bootstrap 3 Styling

Josh edited this page May 23, 2014 · 1 revision

The following Sass/LESS rules will make jQuery Autocomplete suggestions resemble Bootstrap 3 dropdowns.

Sass

.autocomplete-selected
  background: $dropdown-link-hover-bg
  color: $dropdown-link-hover-color

.autocomplete-suggestion
  cursor: pointer
  overflow: hidden // From the jQuery Autocomplete README.
  padding: 3px 20px // Same as .dropdown-menu links.
  white-space: nowrap // From the jQuery Autocomplete README.

.autocomplete-suggestions
  background: $dropdown-bg
  border: 1px solid $dropdown-border
  border-radius: $border-radius-base // From the .dropdown-menu rule.
  +box-shadow(0 6px 12px rgba(0,0,0,.175)) // From the .dropdown-menu rule.
  overflow: auto // From the jQuery Autocomplete README.
  padding: 5px 0 // From the .dropdown-menu rule.

LESS

.autocomplete-selected {
  background: @dropdown-link-hover-bg;
  color: @dropdown-link-hover-color;
}

.autocomplete-suggestion {
  cursor: pointer;
  overflow: hidden; // From the jQuery Autocomplete README.
  padding: 3px 20px; // Same as .dropdown-menu links.
  white-space: nowrap; // From the jQuery Autocomplete README.
}

.autocomplete-suggestions {
  background: @dropdown-bg;
  border: 1px solid @dropdown-border;
  border-radius: @border-radius-base; // From the .dropdown-menu rule.
  .box-shadow(0 6px 12px rgba(0,0,0,.175)); // From the .dropdown-menu rule.
  overflow: auto; // From the jQuery Autocomplete README.
  padding: 5px 0; // From the .dropdown-menu rule.
}
Clone this wiki locally