How to use Chrome Inspector to show the popup css for a jquery plugin

Question

I'm trying to get Chrome inspector to show me the class names and their properties used in a jquery plug-in so I can overwrite and adjust them like I want. However Chrome inspector css window doesn't show it.

I am using a plugin which shows a popup of list items when I click on a textbox. See jsfiddle

$('#example-1').timeselect({
   'step': 15,
    autocompleteSettings: {
        autoFocus: true
    }
});

I want to change the highlighted row background colour and text size from what currently is there as shown in the following screenshot

I read in this answer to see the hover css in Chrome inspector I need to check the .hov style in the window.

It does not matter what element state I set it to. The Chrome css window will not show me the css for the 2 properties I am trying to change i.e. highlighted row font size and background colour. It doesn't show me that gray colour in the window at all. It only allows me to change the static font size of the textbox, not the text size of when the textbox is clicked and the hover is active.

I had a look at the javascript code on GitHub for the plugin. There is no reference. There is no reference to any css or style being applied to it.

Summary of the answer given below:

1. The jquery plugin creates html on DOM ready. Locate the created html in Chrome inspector.

2. Use the inspector to highlight the relevant html created element and take note of the css class name that dynamically gets inserted in the html when I visually highlight a row.

3. In Chrome's css panel window click the + icon and add the class name identified in step 2.

4. View and adjust the css properties for the specific class

Answer 1

In the fiddle, you can inspect the input box (where you click to enter text) and watch the HTML change when you click on and off. If you don't see the elements highlight when they open and close (which usually means that element is changing, like the style of display:none; to block), then you can start mousing over the elements in the inspector.

when you mouse over the elements in the inspector, you'll see the block you want light up. Sometimes the block you want is contained in a bigger block, so you'll have to Just traverse this block (using the black arrow next to it to open the element)

You're looking for <ul class="ui-autocomplete ui-front ui-menu ui-widget ui-widget-content" id="ui-id-1"... This element houses all of the select options.

In the picture below, the way I found the block was to inspect the actual input for "basic examples". This showed me the fully traversed input with an id #example-1. Then since I clicked somewhere else, the actual options were hidden, so I clicked on the input again to open them up and I noticed something changed in the inspector. So, I just moved my mouse over the elements in the inspector while the options box was open. I saw that the div (highlighted in gray in the inspector) was the containing box for the options, then I just traversed from there.

TLDR; You're going to change the backgrounds of .ui-menu-item