试试这个
可以使用以下代码自定义下拉箭头：

select {

  -webkit-appearance: none;

  -moz-appearance: none;

  background: url(http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png);

  background-repeat: no-repeat;

  background-position-x: 98%;

  background-position-y: 2px;

}

下面是一个关于你可以用这段代码做什么的列表：

• 完全删除箭头，为此，只需删除这一行：“背景：url（http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png）;“
• 自定义箭头大小。你需要在上面给出的代码中添加以下行：背景尺寸：30px 30px

您可以更改px中的值。

• 更改箭头，为此，请替换以下代码行中的URL：“背景：url（x1e1f）;“

本指南将帮助您注入代码：https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes
如果你有任何问题，让我知道。
谢谢
Credit：Kevin - From：https://www.jotform.com/answers/2449062-how-can-i-remove-modify-change-the-dropdown-arrow-using-css

<select/>字段的CSS样式非常有限，不允许您实现这一点。你需要使用一个混合字段插件，它可以用HTML列表来构造下拉列表，可以设置样式，比如Hybrid HTML Dropdown插件，它可以是styled，可以加载到你的页面上，把你现有的<select/>字段转换成混合字段。

<script type="text/javascript">
  (function(){
    let sel, hyd;
    document.addEventListener('DOMContentLoaded', (e) => {  //instantiate on document ready.
      sel= document.querySelector('#my-select-list');
      hyd = new HybridDropdown(sel,{});
    })
  })
 </script>

或者，您可以安装CF7的智能网格布局extension，它具有一个动态下拉字段标记，您可以使用它来代替CF7的默认下拉列表，并可以选择显示为混合下拉字段。

你可以这样使用：

span select {
    width: 100%;
    background: url('/path-of-your-icon.svg');
    background-repeat: no-repeat;
    background-position: 60% 50%;
    background-repeat: no-repeat;
    background-size: 1.4rem;
}