CSS /表格下拉箭头位置

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正在执行此操作？ （我正在一个大型站点上工作，而我并没有创建所有文件。）如果是这样，如何清除它，或者如何移动箭头并恢复功能？

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

将额外的填充添加到内部框时，就是这样。

.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>