样式 jQuery 自动完成

Question

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

当鼠标悬停在自动完成的选项上时，我希望背景发生变化，但它并没有改变全部。您会注意到顶部、左侧、底部和右侧的小边框（我猜它们是边距）。我知道我指定只是为了更改 .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>

Answer 1

您可以使用 class .ui-state-focus，因为悬停状态会自动添加到 li 上。

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

Answer 2

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

.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/

样式 jQuery 自动完成

Styling jQuery autocomplete

html

javascript

css

jquery

jquery-ui-autocomplete