2

Edit: This question is already different from the one that was voted duplicate, How to remove the arrow from a select element in Firefox. That question was referenced in the question from the start - before trying to get your daily limit of close votes, please read the question.

I'm using the HtmlService of Google Apps Script to display an HTML form, including jQuery and javascript. Using the recommended stylesheet for Google Doc add-ons, this is how a select box appears in Chrome:

Chrome select

Here's the same thing, in Firefox. Note the extra superimposed arrow.

Firefox select

How can I get rid of that overlay in Firefox?

I've tried the techniques described in How to remove the arrow from a select element in Firefox, but the accepted and highest voted answers stopped working in more recent versions of FF, and didn't work for me. Other solutions involving overflowing the select and hiding the overflow with an enclosing div are interesting, but since they also eliminate the desired "up/down" arrows, they aren't acceptable for this application.

HTML

<div class="block form-group">
  <label for="my-selection">Select an option:</label>
  <select class="width-100" id="my-selection">
    <option value="Option 1"></option>
    <option value="Option 2"></option>
    <option value="Option 3"></option>
  </select>
</div>

CSS

<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons.css">
<!-- The CSS package above applies Google styling to buttons and other elements. -->
<style>
.width-100 {
  width: 100%;
}
select {
  height: 31px;
}
</style>
Community
  • 1
  • 1
Mogsdad
  • 44,709
  • 21
  • 151
  • 275
  • 3
    @leo & other voters... Before you vote to close, consider this: 1. I already referenced [that question with 23 answers](http://stackoverflow.com/questions/5912791/), pointing out that they don't work on new versions of Firefox, and explained why they are not applicable. 2. The Google environment affects the solution - the "under" arrows aren't under my control. – Mogsdad Aug 08 '14 at 18:28
  • You are right, I was too quick. My bad – leo Aug 08 '14 at 19:10
  • 1
    I tried your code in Firefox v37.0.1 and it looks exactly the same as Chrome and Safari (no extra arrow). Maybe google updated their css file? – Jon Doe Apr 08 '15 at 02:42
  • I treid your code in FF 28.0. I get the extra arrow only when i zoom out over the default zoom level. – john-jones Apr 08 '15 at 12:51
  • Is this of any help? https://gist.github.com/joaocunha/6273016 from google search: https://www.google.com/search?client=ubuntu&channel=fs&q=firefox+select+an+option+extra+arrow&ie=utf-8&oe=utf-8 – john-jones Apr 08 '15 at 12:53
  • @ChristianJuth - score. It does seem that something changed in either Chrome or the g-a-s css. I didn't do that one-more-try thing before putting a bounty on this, lazy me. For doing the obvious, I figure you earned it. How about making your comment an answer? – Mogsdad Apr 08 '15 at 13:23
  • @Mogsdad wow thank you so much. I added an answer. Please note I did not do any IE testing (because I am on a mac) so I have no idea what it looks like there. – Jon Doe Apr 08 '15 at 13:47

3 Answers3

1

I tried your code in Firefox v37.0.1 and it looks exactly the same as Chrome and Safari (no extra arrow). Maybe google updated their css file?

Jon Doe
  • 2,172
  • 1
  • 18
  • 35
  • Thanks Christian, for the reminder that a problem that "has always been there" is worth one more look. I'm not sure whether the change was in Firefox or Google's css - either way, the problem is gone, with no code changes required in my add-on! – Mogsdad Apr 08 '15 at 13:51
  • Yeah, I know that feeling. Good luck with your add-on! – Jon Doe Apr 08 '15 at 13:55
  • 1
    That answer is so dang simple! – Anthony Pham Apr 14 '15 at 00:52
0

Other solutions involving overflowing the select and hiding the overflow with an enclosing div are interesting, but since they also eliminate the desired "up/down" arrows, they aren't acceptable for this application.

You just need to re-implement the up/down arrows. I think you can manage two triangles. In my experience, this is the only reliable solution to this problem.

posit labs
  • 8,951
  • 4
  • 36
  • 66
0

Try,

select {
    -moz-appearance: none;
    text-indent: 0.01px;
    text-overflow: '';
}

You may use above. However this trick is reported to be not working somewhere between Firefox v30 - Firefox v35.

For firefox v30 wise, below seems to be working according to the source. You may throw javascript agent to find browser source to act accordingly. (window.navigator.userAgent)

.styled-select { 
  overflow: hidden; 
  width: 200px;
}

@-moz-document url-prefix(){
  .styled-select select { width: 110%; }
}

Follow this Github link for further reference. https://gist.github.com/joaocunha/6273016

huchister
  • 27
  • 1