Styling jQuery autocomplete

Question

I'm using the jQuery UI autocomplete that the web of jQuery provides, and I'm trying to css style it myself.

When hovering over the options of the autocomplete I want the background to change, but it doesn't change all of it. You will notice the little borders (i guess they're margins) over top, left, bottom and right. I know i'm specifying just to change the .ui-menu .ui-menu-item and those little borders are not part of it (i mean, i guess), so I wanted to know how can I change my css style so everything is included on the hovering effect.

Snippet with whole code:

var searcher = document.getElementById('buscador');

searcher.onclick = magiaNegra;


    var availableTags = [
      "ActionScript",
      "AppleScript",
      "Asp",
      "BASIC",
      "C",
      "C++",
      "Clojure",
      "COBOL",
      "ColdFusion",
      "Erlang",
      "Fortran",
      "Groovy",
      "Haskell",
      "Java",
      "JavaScript",
      "Lisp",
      "Perl",
      "PHP",
      "Python",
      "Ruby",
      "Scala",
      "Scheme"
    ];

function magiaNegra()
{
	var master = searcher.parentNode;
	searcher.style.animationName = "expandismo";
	searcher.style.animationDuration = "0.5s";
	setTimeout(function(){
		master.removeChild(searcher);
		var barraSearch = document.createElement('input');
		barraSearch.setAttribute('type', 'text');
		barraSearch.setAttribute('id', 'barraSearch');
		barraSearch.setAttribute('class', 'form-control');
		barraSearch.setAttribute('placeholder', 'Buscar...');
		var botonCheto = document.createElement('button');
		var secondSpan = document.createElement('span');
		botonCheto.setAttribute('type', 'button');
		botonCheto.setAttribute('id', 'searchBox');
		secondSpan.setAttribute('class', 'glyphicon glyphicon-search');
		secondSpan.setAttribute('aria-hidden', 'true');
		botonCheto.appendChild(secondSpan);
		
		master.appendChild(barraSearch);
		master.appendChild(botonCheto);
		barraSearch.focus();
		 $( "#barraSearch" ).autocomplete({
		       source: function(request, response) {
			        var results = $.ui.autocomplete.filter(availableTags, request.term);
			        
			        response(results.slice(0, 3));
			    }
		    });

	}, 500);
}

.container-fluid
{
	text-align: center;
}
#toplane
{

	color: white;
	background-image:  url(citybackground.jpg);
	background-size: 100% 100%;
	min-height: 400px;
}
#pata
{
	background-color: #1a1a1a;
	font-family: Helvetica Narrow, sans-serif, monospace;
	color: white;

}
#botlane
{
	background-color: #1a1a1a;
	height: 100%;
}
#headone
{
	margin-top: 60px;
	color: white;
	text-shadow: 0px 0px 12px white, 0px 0px 8px white;
	font-family: Helvetica Narrow, sans-serif, monospace;
	font-weight: 120px;
	font-size: 60px;
}
#buscador
{
	margin-top: 50px;
	text-align: right;
	padding-right: 12px;
	margin-left: 48%;
	border: none;
	color: #595959;
	width: 40px;
	height: 40px;
	border-radius: 20px;
	background-color: lightgrey;
	cursor: text;
}
#buscador:hover
{
	background-color: lightgrey;
	opacity: 1;
}
#buscador:active
{
	background-color: white;
}
.container-fluid .input-group
{
	width: 100%;

	display: inline-flex;
	text-align: center;

	
}
.container-fluid .input-group .form-control
{
	margin-top: 50px;
	display: inline-block;
	margin-left: 15%;
	width: 70%;
	border-top-left-radius: 18px;
	border-bottom-left-radius: 18px;
	background-color: lightgrey;
	height: 40px;
	padding-left: 10px;
	font-size: 20px;
	color: black;
	letter-spacing: 2px;
	
} 
.container-fluid .input-group .form-control:focus
{
	border-color: lightgrey;
	box-shadow: -5px 0px 5px #e6ffff;
	box-shadow: -5px 0px 10px #e6ffff;
	box-shadow: -5px 0px 8px #e6ffff;
	box-shadow: -5px 0px 12px #e6ffff;

}
#searchBox
{
	margin-top: 50px;
	display: inline-block;
	background-color: lightgrey;
	border: none;
	border-left: solid 1px grey;
	color: #595959;
	height: 40px;
	border-top-right-radius: 18px; 
	border-bottom-right-radius: 18px;
	width: 35px;
}
.container-fluid .input-group .form-control:focus + #searchBox
{
	box-shadow: 5px 0px 5px #e6ffff;
	box-shadow: 5px 0px 10px #e6ffff;
	box-shadow: 5px 0px 8px #e6ffff;
	box-shadow: 5px 0px 12px #e6ffff;

}
#box
{
	margin: 15px 0px 40px 0px;
	max-width: 350px;
	width: 90%;
	height: 300px;
	background-color: white;
	border: solid 2px #b3e6ff;
	border-radius: 6px;
	padding-top: 25px;
	font-family: Helvetica Narrow, sans-serif;
}
.ui-menu
{
	position: relative;
	list-style: none;
	background-color: white;
	border-radius: 18px;
	z-index:10;
	box-shadow: 5px 0px 8px white;
	width: 214px;
	line-height: 200%;
	font-size: 18px;
	padding: 10px;
	border: solid 1px grey;

}
.ui-menu .ui-menu-item
{
	margin: none;
	padding-left: 5px;
}
.ui-menu .ui-menu-item:hover
{
	background-color: darkgrey;
}
@keyframes expandismo
{
	from{width: 40px;margin-left: 49%;}
	to{width: 73%;margin-left: 15%;}
}




	
	Price Surfer FAQ
	
	
	
		
		
	

	
	
	

	
	
	
	



	PRICE SURFER FAQ
	REALICE UNA BUSQUEDA
	
		
	


	O NAVEGE A UNA DE LAS PREGUNTAS MÁS COMUNES:
	
	
			
			¿Cómo crear un usuario nuevo?
			Información sobre la creación de nuevos usuarios en nuestro portal de Price Surfer
	
	
		
		
		
	
	
	
	
		
		
		
	
	
		
		
		
	
	
	
	
		
		
		
	
	
		
		
		
	
	
	PRICE SURFER - NEMO GROUPejemplo@ejemplo.ej

Tim Vermaelen · Accepted Answer

You can use the class .ui-state-focus as the hover state is added automatically on the li when you hover it.

.ui-autocomplete.ui-menu .ui-menu-item.ui-state-focus { background-color: rgba(0,0,0,0.4); }

Styling jQuery autocomplete

Answers (2)

Related Questions