Remove default ui hyperlink behaviour

Question

I have made a search box which uses the jQuery UI autocomplete feature to display potential search matches. I have noticed that the a s in the drop down list move and shrink the UI menu by several pixels when hovered. Is there a way to prevent this such that the only styling that appears on the menu links is the color change I have added via:

.ui-menu .ui-menu-item a:hover{
  background:none;
  color:#FF0000;
  font-size:10px;
}

Here is a fiddle of my progress so far https://jsfiddle.net/shaneswebdevelopment/zcvxy2z6/1/

Answer 1

So it turns out when you hover over an item in the dropdown list, jQuery ui adds a ui-state-focus class on your element which has these css properties:

.ui-state-focus {
     font-weight: normal;
     margin: -1px;
 }

The reason you're seeing the characters jump is because of the margin: -1px; . If you override that css class with something else you can eliminate the jumping text.

So in order to fix you could do this:

.ui-menu .ui-menu-item a.ui-state-focus {
  margin: 0px;
}

Note I've added other CSS selectors in order to get a certain level of specificity to override jQuery UI's styles. Here's an updated jsFiddle: https://jsfiddle.net/zcvxy2z6/16/