如何摆脱select标记的下拉效果

<div class="dropdown">
  <input type="text" class="dropdown-text" readonly>
  <i class="dropdown-icon"></i>
  <ul class="dropdown-menu">
    <!-- 下拉菜单项 -->
    <li>菜单项1</li>
    <li>菜单项2</li>
    <li>菜单项3</li>
  </ul>
</div>

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-text {
  width: 200px;
  padding: 5px;
  border: 1px solid #ccc;
  cursor: pointer;
}

.dropdown-icon {
  position: absolute;
  top: 50%;
  right: 5px;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  border-top: 1px solid #000;
  border-right: 1px solid #000;
  transform: rotate(45deg);
  pointer-events: none;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  max-height: 200px;
  overflow-y: auto;
  border: 1px solid #ccc;
  background-color: #fff;
  list-style: none;
  padding: 0;
  margin: 0;
}

.dropdown-menu li {
  padding: 5px;
  cursor: pointer;
}

.dropdown-menu li:hover {
  background-color: #f0f0f0;
}

var dropdown = document.querySelector('.dropdown');
var dropdownText = dropdown.querySelector('.dropdown-text');
var dropdownMenu = dropdown.querySelector('.dropdown-menu');
var dropdownItems = dropdownMenu.querySelectorAll('li');

dropdownText.addEventListener('click', function() {
  dropdownMenu.classList.toggle('show');
});

dropdownItems.forEach(function(item) {
  item.addEventListener('click', function() {
    dropdownText.value = item.textContent;
    dropdownMenu.classList.remove('show');
  });
});

document.addEventListener('click', function(event) {
  if (!dropdown.contains(event.target)) {
    dropdownMenu.classList.remove('show');
  }
});