Как изменить ширину и поле при использовании арии?

Question

Я использовал библиотеку для datalist / autocomplate. Но я хочу изменить ширину и форму контейнера данных. Как убрать стрелку в красной рамке и сделать ее ширину динамической c в зависимости от содержимого? Нет css используется. Ссылка на библиотеку (удивительно)

<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/awesomplete@1.1.5/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>

---

Снимок экрана