使用aria时如何更改宽度和框？

Question

我使用一个用于数据列表/自动补全的库。但是我想更改数据容器的宽度和形状。如何删除红色框中的箭头并使宽度根据内容动态变化？没有使用CSS。Link for the library(awesomplete)

<div class="awesomplete">
  <input id="sellerId" name="sellerId" autocomplete="off" aria-   expanded="false" aria-owns="awesomplete_list_1">
    <ul role="listbox" id="awesomplete_list_1" hidden="">
      <li role="option" aria-selected="false" id="awesomplete_list_1_item_0"><mark>anush</mark>a - harsha</li>
      <li role="option" aria-selected="false" id="awesomplete_list_1_item_1">SRIKAN874 - <mark>anush</mark>
      </li>
   </ul>
 </div>

Answer 1

要删除箭头，只需添加此CSS

.awesomplete > ul:before {
    display: none !important;
}

---

工作示例

.awesomplete > ul:before {
    display: none !important;
}

<link rel="stylesheet" type="text/css" href="https://leaverou.github.io/awesomplete/awesomplete.css" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/awesomplete.min.js"></script>

<input class="awesomplete" data-list="#mylist" />
<ul id="mylist" style="display:none;">
  <li>Ada</li>
  <li>Java</li>
  <li>JavaScript</li>
  <li>Brainfuck</li>
  <li>LOLCODE</li>
  <li>Node.js</li>
  <li>Ruby on Rails</li>
</ul>

---

屏幕截图