在鼠标悬停时隐藏组合框边框

<div class="combobox">
  <input type="text" class="input-box" onfocus="showDropdown()" onblur="hideDropdown()" readonly>
  <ul class="dropdown">
    <li>选项1</li>
    <li>选项2</li>
    <li>选项3</li>
  </ul>
</div>

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

.input-box {
  border: 1px solid #ccc;
}

.input-box:hover {
  border: 1px solid transparent;
}

.dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  padding: 0;
  margin: 0;
  list-style: none;
  height: 0;
  overflow: hidden;
}

.combobox:hover .dropdown {
  height: auto;
  overflow: visible;
}

function showDropdown() {
  document.querySelector('.dropdown').style.height = 'auto';
  document.querySelector('.dropdown').style.overflow = 'visible';
}

function hideDropdown() {
  document.querySelector('.dropdown').style.height = '0';
  document.querySelector('.dropdown').style.overflow = 'hidden';
}