ATTENTION, PLEASE READ: New topic creation is disabled, as we have moved to a new support system. Your existing topics will remain, but for all new requests you will need to use the new system. Click here to go to the new support request form.

• Back to forum

  Posted in: Dante
• August 26, 2014 at 6:39 pm #104286
  ytilles

  Member

  Post count: 11

  A second arrow appears on the dropdown select options on product pages using FireFox and IE browsers (including the latest versions of these browsers). See attached screenshot.

  How can I hide the <select> dropdown arrow that seems to display on FireFox and IE browsers?

  In attempt to fix it, I added the following CSS to the Theme Options Custom CSS, but it did not work:

  .woocommerce div.product form.cart .variations select {
      -moz-appearance: none;
      text-indent: 0.01px;
      text-overflow: '';
  }
  

  Please help. Thanks.

  Attachments:

  You must be logged in to view attached files.
  August 27, 2014 at 9:12 am #104424
  Mohammad – SUPPORT

  Moderator

  Post count: 27441

  Hi,
  Please use this custom css code:-

  .woocommerce div.product form.cart .variations select {
      -moz-appearance: none;
      text-indent: 0.01px;
      text-overflow: '';
      width:109%
  }

  Thanks 🙂
  With Best Regards
  Mohammad

  August 28, 2014 at 7:19 am #104780
  ytilles

  Member

  Post count: 11

  While it’s not an elegant solution — because the arrow is too close to the right edge — it does work in removing the additional arrow displayed by FireFox. Thank you.

  August 28, 2014 at 4:38 pm #104940
  Rui Guerreiro – SUPPORT

  Keymaster

  Post count: 25779

  Ok.Thanks Mohammad
  -Rui

• Back to forum

  Posted in: Dante