title: CSS/Form dropdown arrow positioning
body: <p>So I'm trying to code an "add to cart" area, where you can select between a few product options and then click a button and add them to the cart. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;form class="add-to-cart-form"&gt;
        &lt;select class="product-select-dropdown"&gt;
               &lt;option&gt; select your option &lt;/option&gt;
               &lt;option value="onewk"&gt; 7 Nights&lt;/option&gt;
               &lt;option value="twowk" selected&gt; 14 Nights &lt;/option&gt;
               &lt;option value="fourwk"&gt; 28 Nights&lt;/option&gt;
         &lt;/select&gt;
         &lt;input type="submit" value="submit"&gt; 
  &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The only CSS I have it to generally style it, but I'm having a lot of issues with the dropdown/arrow itself. </p>
  
  <p><a href="https://i.stack.imgur.com/gGISn.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gGISn.jpg" alt="enter image description here"></a></p>
  
  <p>This is the default select that was there, and the arrow has a weird gap between itself and the select box, and additionally, clicking on the arrow doesn't do anything, you have to click on the select box to get it to drop down. I want the arrow connected to the select box and to initiate dropdown when it is clicked. </p>
  
  <p>Is there CSS I don't know about that's doing this? (I am working on a big site with a lot of files that I didn't all create.) If so, how do I clear it, or how do I move the arrow and restore functionality? </p>
  
  <p>EDIT: would it be better to hide/remove the arrow element completely, and add a custom dropdown arrow?</p>
  
  <p><a href="https://i.stack.imgur.com/vjvmY.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vjvmY.jpg" alt="enter image description here"></a></p>
  
  <p>When adding the extra padding to the inside box, this is what happened. </p>
  
  <pre><code>.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;}
  </code></pre>
  
  <p>This is the CSS I had on the original, but, as I said, I'm working from a website I inherited (run on wordpress) and there are a lot of files and CSS that could be applying here that I'm not aware of. I'm an intern, and i'm relatively new. (I appreciate the help!!)</p>