如何在输入元素中设置下拉箭头按钮的样式

Question

所以我正在使用输入元素而不是 select 元素。 对于输入元素，我使用<datalist>标记将其用作下拉菜单。 下拉箭头看起来不像它应该的样子，但是很多指南都展示了如何为<select>元素设置下拉箭头的样式，但是当它是下拉箭头时，这些解决方案似乎不起作用< <input>元素中的<datalist>标记。

 .input { box-sizing: border-box; height: 60px; width: 424px; border: 2px solid #CCCCCC; border-radius: 2px; background-color: #FFFFFF; } datalist #questions { box-sizing: border-box; height: 9.17px; width: 13.5px; border: 0.5px solid #CCCCCC; background-color: #CCCCCC; }.flex-item { display: flex; padding: 5px; margin: 3px; line-height: 3px; }

 <label class="control-label">Please select a question</label> <input class="input flex-item" list="questions" /> <datalist id="questions"> <option value="How old are you?"> <option value="Where do you live?"> <option value="Are you married?"> <option value="Do you have any children?"> </datalist>

Answer 1

直接，你不能，但你可以试试这个：

<div>
  <input class="input flex-item" list="questions" />
  <datalist id="questions">
    <option value="How old are you?">
    <option value="Where do you live?">
    <option value="Are you married?">
    <option value="Do you have any children?">
  </datalist>
  <div class="arrow"></div>
</div>

div {
  display: inline-flex;
  position: relative;
  border: 1px solid lightblue;
  overflow: hidden;
}

input::-webkit-calendar-picker-indicator {
  display: none;
}

input {
  border: none;
  outline: none;
  background: transparent;
  z-index: 2
}

.arrow {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: 30px;
  background: lightblue;
  display: flex;
  justify-content: center;
  align-items: center;
  border: none;
}

.arrow:after {
  content: ' ';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 5px 0 5px;
  border-color: #007bff transparent transparent transparent;
}

此代码有效： https://stackblitz.com/edit/js-pjta9e?file=style.css