How do I integrate jQuery-ui autocomplete styling into my public scss?


I’m helping to maintain a plugin I did not original author.

The similar sounding posts I’ve read are older, and I understand the process for adding this support has changed to these steps:

  1. Enqueue the script associated with the widget.

In my functions.php, I have:

  1. Download and customize the jquery-ui.css.

This is where I seem to be stuck.

The plugin uses scss files compiled for distribution. In my public.scss I have added

@import 'jquery-ui.css';

This gets picked up and the widget box appears with the minimal styling.

However, when I try to override or add custom classes later in our scss file…

.ui-autocomplete-loading {
  background-color: red;

.ui-autocomplete-category {
  font-weight: bold;
  padding: .2em .4em;
  margin: .8em 0 .2em;
  line-height: 1.5;
  background-color: red;

…these styles seem to get ignored.

I suspected my problem was due to my lack of css skills so put together a plain html/script demo. By doing so I was able to get the styling I wanted outside of WordPress. The issue appears to be with how I’m trying to do this in the WordPress environment.

I’ve read others say to use ThemeRoller, but we have styles I’m trying to adhere to, and I didn’t find any useful documentation about how to use ThemeRoller. I figured a small amount of customization would make more sense.

What do I need to do differently?

Edit: I should add:

  1. If I try to modify .ui-autocomplete-input from inside the public.scss, that gets picked up. The issue seems particular to the styling of the widget itself.

  2. I can post a block of my js code for the autocomplete if you think that is helpful. Suffice to say, ui-autocomplete-category is a class associated with the headers the drop down list should have, and it is my understanding the ui-autocomplete-loading is a class internal to jQuery-ui autocomplete lib. So, this has be wondering if I still need to be loading something differently?

tim.rohrer 2 months 0 Answers 11 views 0

Leave an answer