我可以设置<select>元素的样式来显示列吗？

<div class="custom-select">
  <div class="select-header">
    <span class="selected-option">请选择</span>
    <span class="arrow"></span>
  </div>
  <div class="select-options">
    <div class="option">选项1</div>
    <div class="option">选项2</div>
    <div class="option">选项3</div>
  </div>
</div>

.custom-select {
  position: relative;
  width: 200px;
}

.select-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  background-color: #f0f0f0;
  cursor: pointer;
}

.select-options {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  max-height: 200px;
  overflow-y: auto;
  background-color: #fff;
  border: 1px solid #ccc;
  display: none;
}

.option {
  padding: 10px;
  cursor: pointer;
}

.option:hover {
  background-color: #f0f0f0;
}

.arrow {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 5px 0 5px;
  border-color: #000 transparent transparent transparent;
}

.custom-select.open .select-options {
  display: block;
}

const selectHeader = document.querySelector('.select-header');
const selectOptions = document.querySelector('.select-options');

selectHeader.addEventListener('click', function() {
  selectOptions.classList.toggle('open');
});

const options = document.querySelectorAll('.option');
options.forEach(function(option) {
  option.addEventListener('click', function() {
    const selectedOption = this.textContent;
    document.querySelector('.selected-option').textContent = selectedOption;
    selectOptions.classList.remove('open');
  });
});