样式化jQuery自动完成

时间：2016-08-22 14:52:06

标签： javascript jquery html css jquery-ui-autocomplete

我正在使用jQuery web提供的jQuery UI自动完成功能，我正在尝试自己设置样式。

当将鼠标悬停在自动填充的选项上时，我希望更改背景，但不会更改所有选项。您会注意到顶部，左侧，底部和右侧的小边框（我猜它们是边距）。我知道我只是要更改.ui-menu .ui-menu-item并且那些小边框不属于它（我的意思是，我猜），所以我想知道如何更改我的CSS样式所以一切都包含在徘徊效应。

整个代码片段：

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%;}
}
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Price Surfer FAQ</title>
	
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
	<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js" integrity="sha256-xNjb53/rY+WmG+4L6tTl9m6PpqknWZvRt0rO1SRnJzw=" crossorigin="anonymous"></script>
		
		<!-- Latest compiled and minified CSS -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

	<!-- Optional theme -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.2.0/normalize.min.css">

	<!-- Latest compiled and minified JavaScript -->
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
	<link rel="stylesheet" type="text/css" href="wean1.css">
	
</head>
<body>
<div class="container-fluid" id="toplane">
	<h1 id="headone">PRICE SURFER FAQ</h1>
	<h2 id="headone" style="font-size:30px;margin-top:0px;">REALICE UNA BUSQUEDA</h2>
	<div class="input-group">
		<button id="buscador"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button>
	</div>
</div>
<div class="container-fluid" id="botlane">
	<h2 id="headone" style="font-size:30px;margin-top:15px">O NAVEGE A UNA DE LAS PREGUNTAS MÁS COMUNES:</h2>
	<div class="col-md-4">
	<div id="box">
			<a href="" style="color:#404040"><span class="glyphicon glyphicon-user text-primary" aria-hidden="true" style="font-size:36px"></span>
			<h2 style="padding-top:5px;font-size:25px;">¿Cómo crear un usuario nuevo?</h2></a>
			<p style="padding: 18px 6px 2px 6px;font-size:16px">Información sobre la creación de nuevos usuarios en nuestro portal de Price Surfer</p>
	</div>
	<div id="box">
		<a href=""><span></span>
		<h2></h2></a>
		<p></p>
	</div>
	</div>
	<div class="col-md-4">
	<div id="box">
		<a href=""><span></span>
		<h2></h2></a>
		<p></p>
	</div>
	<div id="box">
		<a href=""><span></span>
		<h2></h2></a>
		<p></p>
	</div>
	</div>
	<div class="col-md-4">
	<div id="box">
		<a href=""><span></span>
		<h2></h2></a>
		<p></p>
	</div>
	<div id="box">
		<a href=""><span></span>
		<h2></h2></a>
		<p></p>
	</div>
	</div>
	<div id="pata"><h3 style="font-size:20px"><span style="float:left">PRICE SURFER - NEMO GROUP</span><span style="float:right">ejemplo@ejemplo.ej</span></h3></div>
</div>

<script type="text/javascript" src="wean1.js"></script>
</body>
</html>

2 个答案:

答案 0 :(得分：1)

您可以使用班级.ui-state-focus，因为当您悬停时，li会自动添加悬停状态。

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

答案 1 :(得分：0)

您可以尝试将左右填充从ui-menu移动到ui-menu-item类。像这样：

.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: 15px 0;
    border: solid 1px grey;

}
.ui-menu .ui-menu-item
{
    margin: none;
    padding-left: 15px;
    padding-right:10px;
}

https://jsfiddle.net/g4bvs0we/1/

相关问题
最新问题