如何在 javascript 下拉菜单中添加背景颜色答案

【问题标题】：How can i add background color in javascript dropdown menu如何在 javascript 下拉菜单中添加背景颜色
【发布时间】：2020-09-25 07:23:24
【问题描述】：

我有以下来自https://www.w3schools.com/howto/howto_js_autocomplete.asp的css代码


* { box-sizing: border-box; }
body {
  font: 16px Arial;
}
.autocomplete {
  /*the container must be positioned relative:*/
  position: relative;
  display: inline-block;
  position: relative;
  left: 950px;
  bottom: 110px;
}
input {
  border: 1px solid transparent;
  background-color: #f1f1f1;
  padding: 10px;
  font-size: 16px;
}
input[type=text] {
  background-color: #f1f1f1;
  width: 100%;
}
input[type=submit] {
  background-color: #3dc21b;
  color: #fff;
}
.autocomplete-items {
  position: absolute;
  border: 1px solid #d4d4d4;
  border-bottom: none;
  border-top: none;
  z-index: 99;

  /*position the autocomplete items to be the same width as the container:*/
  bottom: 70px;
  left: 950px;
  right: 0;

}
.autocomplete-items div {
  padding: 10px;
  cursor: pointer;
  background-color: #fff;
  border-bottom: 1px solid #d4d4d4;
}
.autocomplete-items div:hover {
  /*when hovering an item:*/
  background-color: #e9e9e9;
}
.autocomplete-active {
  /*when navigating through the items using the arrow keys:*/
  background-color: #3dc21b !important;
  color: #ffffff;
}

但对我来说我有这个问题所以下拉 buckground 颜色仅适用于第一个字母

我的html


<p id="notice"><%= notice %></p>

<h1>Invoices</h1>
<h2 id="home"></h2>
<form action = "/invoices" autocomplete="off">
<div class="dropdown">
  <strong>Short By</strong><select  id="singleSelectValueDDJS" class="dropbtn", name="short_by">

  <div  class="dropdown-content">

  <option value="Name" <%= @op1 %>>Name</option>
  <option value="Date" <%= @op2 %>>Date</option>
  <option value="Creatednew" <%= @op3 %>>New to Old</option>
  <option value="Createdold" <%= @op4 %>>Old to New</option>



  </div>

  </select>

 <div class="sbutton"><input type="submit" value="Εφαρμογη", class="action_button"></div><div class="but_sr"><button class="action_button">Αναζητηση</button></div><div id="kostas"><input id="myInput" name="user_in" value="" class="autocomplete" type="text" placeholder="Προμηθευτης/Αριθμος Μ"></div>
</div>

<table class="content-table">
  <thead>
    <tr>
      <th>Προμηθευτης</th>
      <th>Αριθμος Μ.</th>
      <th>Συνολο</th>
      <th>Καθαρο Συνολο</th>
      <th colspan="3"></th>
    </tr>
  </thead>

  <tbody id="tableid">
    <% @invoices.each do |invoice| %>
      <tr>
        <td><%= invoice.form %></td>
        <td><%= invoice.invoice_num %></td>
        <td><%= invoice.total_sum[0] %></td>
        <td><%= invoice.tota_sum_taxless[0] %></td>
        <td><%= link_to 'Show', invoice, class: 'action_button' %></td>
        <td><%= link_to 'Edit', edit_invoice_path(invoice), class: 'action_button' %></td>
        <td><%= link_to 'Destroy', invoice, method: :delete, data: { confirm: 'Are you sure?' }, class: 'action_button' %></td>
      </tr>
    <% end %>
  </tbody>

</table>
<script>
    var promList = JSON.parse('<%= raw @autoComplete %>')
</script>
<%= javascript_pack_tag 'find_me' %>
<br>

应该是我在 ruby on rails 工作的问题吗？代码是复制粘贴，还是不行

或者是在下拉菜单中为背景添加颜色的其他方法？

解决方案

.autocomplete-items div {
  padding: 10px;
  padding-inline-start: 10px;
  padding-inline-end: 205px;
  cursor: pointer;
  background-color: #3dc21b;
  border-bottom: 1px solid #d4d4d4;
}

【问题讨论】：

标签： javascript html css forms

【解决方案1】：

我不确定您是如何实现搜索的，但在w3scool 的how to 中，他们在javascript 部分中写道：

b.innerHTML = "<strong>" + arr[i].substr(0, val.length) + "</strong>";

负责将匹配的字母加粗。你在红宝石中做过同样的事情吗？确保你正在实施。

【讨论】：