How can I delete these arrows?

Question

I have this site:

http://test2.dac-proiect.ro/wp/?page_id=6

I want to remove the arrows in the picture below.

http://i61.tinypic.com/rhvgxh.png

You must add the product to cart to see those arrows

Code HTML:

    <div class="cart-number">
    <span></span>
    <div class="quantity buttons_added"><input type="button" value="-" class="minus"><input type="number" step="1" name="cart[d3d9446802a44259755d38e6d163e820][qty]" value="1" title="Quantity" class="input-text qty text" size="4"><input type="button" value="+" class="plus"></div>
</div>

Code CSS:

 .quantity {
  width: auto;
  position: relative;
  margin: 0 auto;
  overflow: hidden;
  zoom: 1;
}
.quantity input.qty {
  float: left;
  width: 45px;
  height: 38px;
  text-align: center;
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
  padding: 0;
  font-weight: bold;
  -moz-appearance: textfield;
}
.quantity input.qty:focus:focus {
  border-color: #66afe9;
  outline: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
}
.quantity .plus, .quantity .minus {
  background: #fff;
  float: left;
  display: block;
  padding: 0;
  margin: 0;
  vertical-align: text-top;
  text-decoration: none;
  overflow: visible;
  text-decoration: none;
  cursor: pointer;
  line-height: 13px;
  font-size: 12px;
  color: #666666;
  border: 1px solid #e5e5e5;
  text-align: center;
  width: 45px;
  height: 38px;
}
.quantity .plus {
  border-left: none;
  top: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  right: 0;
}
.quantity .minus {
  border-right: none;
  bottom: 0;
  right: 0;
  border-top-right-radius: 0;
  border-top-left-radius: 0;
}

How can I solve this problem? I can not figure out where they come from those arrows

Thanks in advance!

I don't see arrows at all, I only see a "+", and an empty space where a "-" would be — JesseEarley, Mar 30 '15 at 11:50
Refer the below link http://stackoverflow.com/questions/3790935/can-i-hide-the-html5-number-input-s-spin-box — Sridhar Narasimhan, Mar 30 '15 at 11:52
if you put the arrow on two arrows appear that number up and down.I put the picture to see exactly where I want to look — Sz. Erika, Mar 30 '15 at 11:58

score 0 · Accepted Answer · answered Mar 30 '15 at 11:57

It all depends on the input type, you want to use this bit of CSS to hide it.

    input[type="number"]::-webkit-outer-spin-button,
    input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;}
    input[type="number"] {
    -moz-appearance: textfield;}

Cheers

How can I delete these arrows?

1 Answers1