1

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. 

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

The only CSS I have it to generally style it, but I'm having a lot of issues with the dropdown/arrow itself.

enter image description here

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.

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?

EDIT: would it be better to hide/remove the arrow element completely, and add a custom dropdown arrow?

enter image description here

When adding the extra padding to the inside box, this is what happened. 

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

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!!)

Machavity
  • 30,841
  • 27
  • 92
  • 100
Sarah Stark
  • 119
  • 5
  • Well, first of all the arrow has the submit functionality. Secondly, we need some css to go on something. Worst case scenario, you can use :before and :after pseudo elements on the dropdown class and put a background image with the arrow and style it accordingly. – Torjescu Sergiu Aug 06 '18 at 09:55
  • The only CSS that I put on the menu is changing the font and the font size and color. I guess that must mean there are other files that are acting on it, and I need to figure out how to clear those styles. – Sarah Stark Aug 06 '18 at 09:58
  • The positioning of elements is easy to fix, you can try the solution given below, but I was mostly referring to the functionality of the arrow. – Torjescu Sergiu Aug 06 '18 at 10:00

1 Answers1

0

Use the below code to achieve the same

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>
Charu Maheshwari
  • 1,583
  • 1
  • 8
  • 9