personalizar el cuadro de autocompletar desplegable

Question

Estoy usando el widget jquerys autocomplete pero estoy teniendo algunos problemas al tratar de darle estilo al cuadro que aparece cuando busca algo.

Estoy tratando de mover la caja un poco y cambiar el color del borde/bg, pero algunos JS están agregando algunos estilos incrustados que están anulando mis estilos .css. Pero no puedo encontrarlo

I'v based mine off this one.

<ul class="ui-autocomplete ui-menu ui-widget-content" role="listbox" aria-activedescendant="ui-active-menuitem" style="z-index: 11; display: block; width: 139px; top: 44px; left: 1101px; "><li class="ui-menu-item" role="menuitem"> 

Answer 1

Para evitar el uso de !important, puede agregar sus estilos con jQuery y anularlos de esa manera.

$('ul.ui-autocomplete').css({ 
    color: 'red' 
}); 

Otra solución sería eliminar el atributo de estilo de la ul.

$('ul.ui-autocomplete').removeAttr('style'); 

Answer 2

Sin ver sus estilos css, o la orden que va a cargar los archivos .css, que podría anular los estilos mediante el uso de Firebug para inspeccionar el que se aplican las clases, y la adición de !important; a sus principales estilos css.

Ej.

ul.ui-autocomplete { 
color: red !important; 
} 

La mejor manera que puede combatir esto es para rastrear adecuadamente hacia abajo si su plugin jQuery tiene algún parámetro para ayudarle, o tira las JS mismo y añadir sus propios estilos CSS.

Lo anterior! Importante; La regla puede ser una pesadilla, es un truco en cierto sentido, pero puede funcionar para ti.

Answer 3

intenta agregar margin-top y margin-left en su css

Reemplazar el valor topleft y no es bueno, ya que se calcula en relación con el campo de texto se deriva de.

Answer 4

Realmente no soy un profesional en jquery, pero eché un vistazo en el ejemplo que enviaste y el estilo del menú está dado por una hoja de estilo de menú (jquery.ui.menu.css). Mire el siguiente enlace y creo que hay alguna información que puede ayudarlo.

http://docs.jquery.com/UI/Menu#theming

Usted será capaz de personalizar el aspecto y la sensación de su desplegable en estas clases.

«Si se necesita un nivel más profundo de personalización, hay clases específicas de widgets a las que se hace referencia en la hoja de estilos jquery.ui.menu.css que se puede modificar.» Desde el sitio web de jquery.

Answer 5

intente utilizar la posición o anexar a la opción ... puede consultar aquí ...

http://jqueryui.com/demos/autocomplete/#option-position

Answer 6

desproteger el archivo jquery.ui.theme.css,

la clase .ui-widget-content cerca de la parte superior se puede utilizar para poner un color de fondo en el cuadro de resultados de la búsqueda de autocompletar, las fronteras y posicionamiento también pueden ser ajustados a través de esta clase .