HTML选择输入选项下拉箭头未显示在chrome上

Question

我在一个模态中包含了一个表单。表单包含一个选择输入。我遇到的问题是选择下拉箭头显示在除Chrome之外的其他浏览器上。所以我想添加一个插入符号图标。做这个的最好方式是什么？也欢迎替代解决方案

Answer 1

首先，您需要删除css中select的外观：

select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}

您可以使用以下内容添加自己的图像箭头：

select {
background: #fff url(myimagepath/image.png) no-repeat 0 90%;
}

或者，如果您不想使用图像，可以执行以下操作：

select:after {
    content: "";
    position: absolute;
    z-index: 2;
    right: 8px;
    top: 50%;
    margin-top: -3px;
    height: 0;
    width: 0;
    border-top: 6px solid #f99300;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    pointer-events: none;
}