CSS/Form 下拉箭头定位

Question

所以我尝试编写一个“添加到购物车”区域，您可以在其中选择几个产品选项，然后单击一个按钮并将它们添加到购物车。

<form class="add-to-cart-form">
      <select class="product-select-dropdown">
             <option> select your option </option>
             <option value="onewk"> 7 Nights</option>
             <option value="twowk" selected> 14 Nights </option>
             <option value="fourwk"> 28 Nights</option>
       </select>
       <input type="submit" value="submit"> 
</form>

我拥有的唯一 CSS 可以对其进行一般样式设置，但我对下拉菜单/箭头本身有很多问题。

这是那里的默认选择，箭头本身和选择框之间有一个奇怪的间隙，此外，点击箭头没有任何作用，你必须点击选择框才能得到它下降。我希望箭头连接到选择框并在单击时启动下拉菜单。

是否有我不知道的 CSS 正在执行此操作？ (我在一个大网站上工作，其中有很多我没有创建的文件。)如果是这样，我该如何清除它，或者我如何移动箭头并恢复功能？

编辑:完全隐藏/删除箭头元素并添加自定义下拉箭头会更好吗？

将额外的填充添加到内部框时，会发生这种情况。

.product-select-dropdown{
border: 1px solid #000000;
height: 33px;
font-size: 14.3px;
border-radius: 0;
background-color: #FFFFFF;
line-height: 1em;
padding: 9px 13px 6px;}

这是我在原始文件中使用的 CSS，但是，正如我所说，我正在从我继承的网站(在 wordpress 上运行)工作，并且有很多文件和 CSS 可以应用到这里，我我不知道。我是实习生，我比较新。 (感谢您的帮助!!)

Answer 1

使用下面的代码实现同样的效果

select {
  float: left;
}

input {
  PADDING: 0 6PX;
}

<form class="add-to-cart-form">
  <select class="product-select-dropdown">
    <option> select your option </option>
    <option value="onewk"> 7 Nights</option>
    <option value="twowk" selected> 14 Nights </option>
    <option value="fourwk"> 28 Nights</option>
  </select>
  <input type="submit" value="submit">
</form>