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

【问题标题】：How to style dropdown arrow button when its in an input element如何在输入元素中设置下拉箭头按钮的样式
【发布时间】：2020-12-10 00:27:53
【问题描述】：

所以我正在使用输入元素而不是选择元素。对于输入元素，我使用<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>

【问题讨论】：

简短的回答是你不能。更长的答案是，每个浏览器都实现了自己的专有样式属性，允许对原生浏览器元素的组件进行一些自定义，但它们并不能在所有客户端之间提供一致的外观。

标签： javascript html css

【解决方案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

【讨论】：