joaocunha · June 6, 2025 21:03 · Oct 30, 2015 · Aug 11, 2015 · Jan 16, 2015 · Jan 14, 2015
diff --git a/How To Hide The Select Arrow On Firefox.md b/How To Hide The Select Arrow On Firefox.md
@@ -1,19 +1,6 @@
-This is no longer a bug. I'm keeping the gist for historical reasons, as it helped to get it fixed. Make sure to read the edits below.
+This is no longer a bug. I'm keeping the gist for historical reasons, as it helped to get it fixed. Make sure to read the notes by the end of the post.
 --------------------------------------------------------------------------------
 
-**Edit 4:** Mozilla released Firefox v35 and, indeed, the bug is patched.
-https://developer.mozilla.org/en-US/Firefox/Releases/35
-
-**Edit 3:** Mozilla addressed the issue! Target milestone is v35. [Yay!](https://hg.mozilla.org/mozilla-central/rev/161e4dbfff7d)
-
-**Edit 2:** Todd Parker from Filament Group [tweeted](https://twitter.com/toddmparker/status/511626859659153408) about a CSS only alternative that works pretty much everywhere. You can [check it here](http://jsbin.com/yaruh).
-
-**Edit:** this trick **stopped working** as of [Firefox 30](https://developer.mozilla.org/en-US/Firefox/Releases/30/Site_Compatibility#CSS) realeased in 2014-06-10. Join the comments section to help finding an alternative, **and please [upvote the bug on Bugzilla](https://bugzilla.mozilla.org/show_bug.cgi?id=649849) for a definitive fix**. If you now have double arrows on Firefox, [this might solve your issue](https://gist.github.com/joaocunha/6273016#comment-1244649).
-
-**Don't use any other value of `-moz-appearance` as the styles inherited are not customisable.**
-
-------------------------------------------------------------
-
 How to ~~remove~~ hide the select arrow in Firefox using `-moz-appearance:none;`
 ===========================================================================================
 
@@ -75,4 +62,19 @@ Thanks
 
 <sup>[2]</sup>[RussellUresti](http://stackoverflow.com/questions/5912791/how-to-remove-the-arrow-from-a-select-tag-in-firefox/18317228#comment26925917_18317228) for noticing the white space.
 
-<sup>[3]</sup>[MathiasaurusRex](http://stackoverflow.com/questions/6787667/what-is-the-correct-moz-appearance-value-to-hide-dropdown-arrow-of-a-select/18327666?noredirect=1#comment33135951_18327666) for noticing the zoom issue.
+<sup>[3]</sup>[MathiasaurusRex](http://stackoverflow.com/questions/6787667/what-is-the-correct-moz-appearance-value-to-hide-dropdown-arrow-of-a-select/18327666?noredirect=1#comment33135951_18327666) for noticing the zoom issue.
+
+
+Notes
+-----------------------------------------------------------------------
+
+**Edit 4:** Mozilla released Firefox v35 and, indeed, the bug is patched.
+https://developer.mozilla.org/en-US/Firefox/Releases/35
+
+**Edit 3:** Mozilla addressed the issue! Target milestone is v35. [Yay!](https://hg.mozilla.org/mozilla-central/rev/161e4dbfff7d)
+
+**Edit 2:** Todd Parker from Filament Group [tweeted](https://twitter.com/toddmparker/status/511626859659153408) about a CSS only alternative that works pretty much everywhere. You can [check it here](http://jsbin.com/yaruh).
+
+**Edit:** this trick **stopped working** as of [Firefox 30](https://developer.mozilla.org/en-US/Firefox/Releases/30/Site_Compatibility#CSS) realeased in 2014-06-10. Join the comments section to help finding an alternative, **and please [upvote the bug on Bugzilla](https://bugzilla.mozilla.org/show_bug.cgi?id=649849) for a definitive fix**. If you now have double arrows on Firefox, [this might solve your issue](https://gist.github.com/joaocunha/6273016#comment-1244649).
+
+**Don't use any other value of `-moz-appearance` as the styles inherited are not customisable.**
diff --git a/How To Hide The Select Arrow On Firefox.md b/How To Hide The Select Arrow On Firefox.md
@@ -1,4 +1,4 @@
-I'm keeping this gist for historical reasons, as it helped substantially to get this bug fixed. Make sure to read the edits below.
+This is no longer a bug. I'm keeping the gist for historical reasons, as it helped to get it fixed. Make sure to read the edits below.
 --------------------------------------------------------------------------------
 
 **Edit 4:** Mozilla released Firefox v35 and, indeed, the bug is patched.

diff --git a/How To Hide The Select Arrow On Firefox.md b/How To Hide The Select Arrow On Firefox.md
@@ -1,4 +1,4 @@
-I'm keeping this gist for historical reasons. Make sure to read the edits below.
+I'm keeping this gist for historical reasons, as it helped substantially to get this bug fixed. Make sure to read the edits below.
 --------------------------------------------------------------------------------
 
 **Edit 4:** Mozilla released Firefox v35 and, indeed, the bug is patched.

diff --git a/How To Hide The Select Arrow On Firefox.md b/How To Hide The Select Arrow On Firefox.md
@@ -1,4 +1,8 @@
 I'm keeping this gist for historical reasons. Make sure to read the edits below.
+--------------------------------------------------------------------------------
+
+**Edit 4:** Mozilla released Firefox v35 and, indeed, the bug is patched.
+https://developer.mozilla.org/en-US/Firefox/Releases/35
 
 **Edit 3:** Mozilla addressed the issue! Target milestone is v35. [Yay!](https://hg.mozilla.org/mozilla-central/rev/161e4dbfff7d)
 

diff --git a/How To Hide The Select Arrow On Firefox.md b/How To Hide The Select Arrow On Firefox.md
@@ -1,5 +1,7 @@
 I'm keeping this gist for historical reasons. Make sure to read the edits below.
 
+**Edit 3:** Mozilla addressed the issue! Target milestone is v35. [Yay!](https://hg.mozilla.org/mozilla-central/rev/161e4dbfff7d)
+
 **Edit 2:** Todd Parker from Filament Group [tweeted](https://twitter.com/toddmparker/status/511626859659153408) about a CSS only alternative that works pretty much everywhere. You can [check it here](http://jsbin.com/yaruh).
 
 **Edit:** this trick **stopped working** as of [Firefox 30](https://developer.mozilla.org/en-US/Firefox/Releases/30/Site_Compatibility#CSS) realeased in 2014-06-10. Join the comments section to help finding an alternative, **and please [upvote the bug on Bugzilla](https://bugzilla.mozilla.org/show_bug.cgi?id=649849) for a definitive fix**. If you now have double arrows on Firefox, [this might solve your issue](https://gist.github.com/joaocunha/6273016#comment-1244649).

diff --git a/How To Hide The Select Arrow On Firefox.md b/How To Hide The Select Arrow On Firefox.md
@@ -1,6 +1,6 @@
 I'm keeping this gist for historical reasons. Make sure to read the edits below.
 
-**Edit 2:** Todd Parker [tweeted](https://twitter.com/toddmparker/status/511626859659153408) about a CSS only alternative that works pretty much everywhere. You can [check it here](http://jsbin.com/yaruh).
+**Edit 2:** Todd Parker from Filament Group [tweeted](https://twitter.com/toddmparker/status/511626859659153408) about a CSS only alternative that works pretty much everywhere. You can [check it here](http://jsbin.com/yaruh).
 
 **Edit:** this trick **stopped working** as of [Firefox 30](https://developer.mozilla.org/en-US/Firefox/Releases/30/Site_Compatibility#CSS) realeased in 2014-06-10. Join the comments section to help finding an alternative, **and please [upvote the bug on Bugzilla](https://bugzilla.mozilla.org/show_bug.cgi?id=649849) for a definitive fix**. If you now have double arrows on Firefox, [this might solve your issue](https://gist.github.com/joaocunha/6273016#comment-1244649).
 

diff --git a/How To Hide The Select Arrow On Firefox.md b/How To Hide The Select Arrow On Firefox.md
@@ -1,6 +1,6 @@
 I'm keeping this gist for historical reasons. Make sure to read the edits below.
 
-**Edit 2:** Todd Parker [tweeted](https://twitter.com/toddmparker/status/511626859659153408) about a CSS only alternative that works pretty much everywhere. You can [check it here](http://jsbin.com/cihor).
+**Edit 2:** Todd Parker [tweeted](https://twitter.com/toddmparker/status/511626859659153408) about a CSS only alternative that works pretty much everywhere. You can [check it here](http://jsbin.com/yaruh).
 
 **Edit:** this trick **stopped working** as of [Firefox 30](https://developer.mozilla.org/en-US/Firefox/Releases/30/Site_Compatibility#CSS) realeased in 2014-06-10. Join the comments section to help finding an alternative, **and please [upvote the bug on Bugzilla](https://bugzilla.mozilla.org/show_bug.cgi?id=649849) for a definitive fix**. If you now have double arrows on Firefox, [this might solve your issue](https://gist.github.com/joaocunha/6273016#comment-1244649).
 

diff --git a/How To Hide The Select Arrow On Firefox.md b/How To Hide The Select Arrow On Firefox.md
@@ -1,6 +1,6 @@
 I'm keeping this gist for historical reasons. Make sure to read the edits below.
 
-**Edit 2:** Todd Barker [tweeted](https://twitter.com/toddmparker/status/511626859659153408) about a CSS only alternative that works pretty much everywhere. You can [check it here](http://jsbin.com/cihor).
+**Edit 2:** Todd Parker [tweeted](https://twitter.com/toddmparker/status/511626859659153408) about a CSS only alternative that works pretty much everywhere. You can [check it here](http://jsbin.com/cihor).
 
 **Edit:** this trick **stopped working** as of [Firefox 30](https://developer.mozilla.org/en-US/Firefox/Releases/30/Site_Compatibility#CSS) realeased in 2014-06-10. Join the comments section to help finding an alternative, **and please [upvote the bug on Bugzilla](https://bugzilla.mozilla.org/show_bug.cgi?id=649849) for a definitive fix**. If you now have double arrows on Firefox, [this might solve your issue](https://gist.github.com/joaocunha/6273016#comment-1244649).
 

diff --git a/How To Hide The Select Arrow On Firefox.md b/How To Hide The Select Arrow On Firefox.md
@@ -1,4 +1,8 @@
-Edit: this trick **stopped working** as of [Firefox 30](https://developer.mozilla.org/en-US/Firefox/Releases/30/Site_Compatibility#CSS) realeased in 2014-06-10. Join the comments section to help finding an alternative, **and please [upvote the bug on Bugzilla](https://bugzilla.mozilla.org/show_bug.cgi?id=649849) for a definitive fix**. If you now have double arrows on Firefox, [this might solve your issue](https://gist.github.com/joaocunha/6273016#comment-1244649).
+I'm keeping this gist for historical reasons. Make sure to read the edits below.
+
+**Edit 2:** Todd Barker [tweeted](https://twitter.com/toddmparker/status/511626859659153408) about a CSS only alternative that works pretty much everywhere. You can [check it here](http://jsbin.com/cihor).
+
+**Edit:** this trick **stopped working** as of [Firefox 30](https://developer.mozilla.org/en-US/Firefox/Releases/30/Site_Compatibility#CSS) realeased in 2014-06-10. Join the comments section to help finding an alternative, **and please [upvote the bug on Bugzilla](https://bugzilla.mozilla.org/show_bug.cgi?id=649849) for a definitive fix**. If you now have double arrows on Firefox, [this might solve your issue](https://gist.github.com/joaocunha/6273016#comment-1244649).
 
 **Don't use any other value of `-moz-appearance` as the styles inherited are not customisable.**
 
@@ -62,5 +66,7 @@ Follow me
 Thanks
 ------------------------------------------------------------
 <sup>[1]</sup>[Binyamin](https://bugzilla.mozilla.org/show_bug.cgi?id=649849#c85) for improving it from 1px to 0.01px.
+
 <sup>[2]</sup>[RussellUresti](http://stackoverflow.com/questions/5912791/how-to-remove-the-arrow-from-a-select-tag-in-firefox/18317228#comment26925917_18317228) for noticing the white space.
+
 <sup>[3]</sup>[MathiasaurusRex](http://stackoverflow.com/questions/6787667/what-is-the-correct-moz-appearance-value-to-hide-dropdown-arrow-of-a-select/18327666?noredirect=1#comment33135951_18327666) for noticing the zoom issue.
diff --git a/How To Hide The Select Arrow On Firefox.md b/How To Hide The Select Arrow On Firefox.md
@@ -1,5 +1,9 @@
 Edit: this trick **stopped working** as of [Firefox 30](https://developer.mozilla.org/en-US/Firefox/Releases/30/Site_Compatibility#CSS) realeased in 2014-06-10. Join the comments section to help finding an alternative, **and please [upvote the bug on Bugzilla](https://bugzilla.mozilla.org/show_bug.cgi?id=649849) for a definitive fix**. If you now have double arrows on Firefox, [this might solve your issue](https://gist.github.com/joaocunha/6273016#comment-1244649).
 
+**Don't use any other value of `-moz-appearance` as the styles inherited are not customisable.**
+
+------------------------------------------------------------
+
 How to ~~remove~~ hide the select arrow in Firefox using `-moz-appearance:none;`
 ===========================================================================================
 

diff --git a/How To Hide The Select Arrow On Firefox.md b/How To Hide The Select Arrow On Firefox.md
@@ -1,4 +1,4 @@
-Edit: this trick **stopped working** as of [Firefox 30](https://www.mozilla.org/en-US/firefox/30.0/releasenotes/) realeased in 2014-06-10. Join the comments section to help finding an alternative, **and please [upvote the bug on Bugzilla](https://bugzilla.mozilla.org/show_bug.cgi?id=1024310) for a definitive fix**. If you now have double arrows on Firefox, [this might solve your issue](https://gist.github.com/joaocunha/6273016#comment-1244649).
+Edit: this trick **stopped working** as of [Firefox 30](https://developer.mozilla.org/en-US/Firefox/Releases/30/Site_Compatibility#CSS) realeased in 2014-06-10. Join the comments section to help finding an alternative, **and please [upvote the bug on Bugzilla](https://bugzilla.mozilla.org/show_bug.cgi?id=649849) for a definitive fix**. If you now have double arrows on Firefox, [this might solve your issue](https://gist.github.com/joaocunha/6273016#comment-1244649).
 
 How to ~~remove~~ hide the select arrow in Firefox using `-moz-appearance:none;`
 ===========================================================================================

diff --git a/How To Hide The Select Arrow On Firefox.md b/How To Hide The Select Arrow On Firefox.md
@@ -1,4 +1,4 @@
-Edit: this trick stopped working as of [Firefox 30](https://www.mozilla.org/en-US/firefox/30.0/releasenotes/) realeased in 2014-06-10. Join the comments section to help finding an alternative, **and please [upvote the bug on Bugzilla](https://bugzilla.mozilla.org/show_bug.cgi?id=1024310) for a definitive fix**.
+Edit: this trick **stopped working** as of [Firefox 30](https://www.mozilla.org/en-US/firefox/30.0/releasenotes/) realeased in 2014-06-10. Join the comments section to help finding an alternative, **and please [upvote the bug on Bugzilla](https://bugzilla.mozilla.org/show_bug.cgi?id=1024310) for a definitive fix**. If you now have double arrows on Firefox, [this might solve your issue](https://gist.github.com/joaocunha/6273016#comment-1244649).
 
 How to ~~remove~~ hide the select arrow in Firefox using `-moz-appearance:none;`
 ===========================================================================================

diff --git a/How To Hide The Select Arrow On Firefox.md b/How To Hide The Select Arrow On Firefox.md
@@ -1,4 +1,4 @@
-Edit: this trick [stopped working](https://gist.github.com/joaocunha/6273016#comment-1219199) as of [Firefox 30](https://www.mozilla.org/en-US/firefox/30.0/releasenotes/) realeased in 2014-06-10. Join the comments section to help finding an alternative.
+Edit: this trick stopped working as of [Firefox 30](https://www.mozilla.org/en-US/firefox/30.0/releasenotes/) realeased in 2014-06-10. Join the comments section to help finding an alternative, **and please [upvote the bug on Bugzilla](https://bugzilla.mozilla.org/show_bug.cgi?id=1024310) for a definitive fix**.
 
 How to ~~remove~~ hide the select arrow in Firefox using `-moz-appearance:none;`
 ===========================================================================================

diff --git a/How To Hide The Select Arrow On Firefox.md b/How To Hide The Select Arrow On Firefox.md
@@ -1,4 +1,4 @@
-Edit: this trick [stopped working](https://gist.github.com/joaocunha/6273016#comment-1219199) as of Firefox 31 (in Nightly build as of May 2014). Join the comments section to help finding an alternative.
+Edit: this trick [stopped working](https://gist.github.com/joaocunha/6273016#comment-1219199) as of [Firefox 30](https://www.mozilla.org/en-US/firefox/30.0/releasenotes/) realeased in 2014-06-10. Join the comments section to help finding an alternative.
 
 How to ~~remove~~ hide the select arrow in Firefox using `-moz-appearance:none;`
 ===========================================================================================

diff --git a/How To Hide The Select Arrow On Firefox.md b/How To Hide The Select Arrow On Firefox.md
@@ -1,9 +1,9 @@
-Edit: this trick [stopped working](https://gist.github.com/joaocunha/6273016#comment-1219199) as of Firefox 31 (in Nightly build as of May 2014). Let's see what can be done in the meanwhile.
+Edit: this trick [stopped working](https://gist.github.com/joaocunha/6273016#comment-1219199) as of Firefox 31 (in Nightly build as of May 2014). Join the comments section to help finding an alternative.
 
 How to ~~remove~~ hide the select arrow in Firefox using `-moz-appearance:none;`
 ===========================================================================================
 
-tl;dr (or, the fix)
+TL;DR (or, the fix)
 ------------------------------------------------------------
 1.  Set `-moz-appearance` to `none`. This will "reset" the styling of the element;
 2.  Set `text-indent` to `0.01px`. This will "push" the text a tiny bit<sup>[1]</sup> to the right;
@@ -15,7 +15,7 @@ tl;dr (or, the fix)
 
 Background
 ------------------------------------------------------------
-I was experimenting on custom styling the `<select>` elements of a form I was building. One of the things I tried implementing was truncating the text with an ellipsis in case it extended beyond the `<select>`'s width. It didn't look consistent through browsers, but I've accidentally discovered something really nice.
+I was experimenting on custom styling the `<select>` elements of a form I was building. One of the things I tried implementing was truncating the text with an ellipsis in case it extended beyond the `<select>`'s width. It didn't look consistent through browsers, but I discovered something nice.
 
 The bug
 ------------------------------------------------------------
@@ -45,18 +45,18 @@ Final considerations
 * Turns out that **Windows doesn't require** the `-moz-appearance: none;` declaration at all. Tested on 8;
 * **Firefox for Android** needs the whole `width` of the arrow as `text-indent`. It means you need to set it to at least `5px`, but take care since **Firefox seems to double the `text-indent` value on `<select>` elements**.
 * Zooming out (ctrl mousewheeldown, ctrl -, etc) reveals<sup>[3]</sup> the default arrow. No big deal;
-* The `appearance` attribute is not well supported through browsers, so take this fix with a grain of salt when developing your crossbrowser solution. 
+* The `appearance` attribute is not well supported through browsers, so take this workaround with a grain of salt when developing your crossbrowser solution.
 
 Support
 ------------------------------------------------------------
-*Ubuntu*, *Windows*, *Mac*, *Android 4.x*.
+Tested on latest versions of *Ubuntu*, *Windows*, *Mac* and *Android*.
 
-Follow the guy
+Follow me
 ------------------------------------------------------------
 [@joaocunha](http://twitter.com/joaocunha)
 
-<sub><sup>[1]</sup> Thanks to [Binyamin](https://bugzilla.mozilla.org/show_bug.cgi?id=649849#c85) for improving it from 1px to 0.01px.</sub>
-
-<sub><sup>[2]</sup> Thanks to [RussellUresti](http://stackoverflow.com/questions/5912791/how-to-remove-the-arrow-from-a-select-tag-in-firefox/18317228#comment26925917_18317228) for noticing the white space.</sub>
-
-<sub><sup>[3]</sup> Thanks to [MathiasaurusRex](http://stackoverflow.com/questions/6787667/what-is-the-correct-moz-appearance-value-to-hide-dropdown-arrow-of-a-select/18327666?noredirect=1#comment33135951_18327666) for noticing the zoom issue.</sub>
+Thanks
+------------------------------------------------------------
+<sup>[1]</sup>[Binyamin](https://bugzilla.mozilla.org/show_bug.cgi?id=649849#c85) for improving it from 1px to 0.01px.
+<sup>[2]</sup>[RussellUresti](http://stackoverflow.com/questions/5912791/how-to-remove-the-arrow-from-a-select-tag-in-firefox/18317228#comment26925917_18317228) for noticing the white space.
+<sup>[3]</sup>[MathiasaurusRex](http://stackoverflow.com/questions/6787667/what-is-the-correct-moz-appearance-value-to-hide-dropdown-arrow-of-a-select/18327666?noredirect=1#comment33135951_18327666) for noticing the zoom issue.
diff --git a/How To Hide The Select Arrow On Firefox.md b/How To Hide The Select Arrow On Firefox.md
@@ -49,7 +49,7 @@ Final considerations
 
 Support
 ------------------------------------------------------------
-*Ubuntu*, *Windows*, *Mac*, *Android 4.3*.
+*Ubuntu*, *Windows*, *Mac*, *Android 4.x*.
 
 Follow the guy
 ------------------------------------------------------------

diff --git a/How To Hide The Select Arrow On Firefox.md b/How To Hide The Select Arrow On Firefox.md
@@ -1,4 +1,4 @@
-** Edit: this trick [stopped working](https://gist.github.com/joaocunha/6273016#comment-1219199) as of Firefox 31 (in Nightly build as of May 2014). Let's see what can be done in the meanwhile. **
+Edit: this trick [stopped working](https://gist.github.com/joaocunha/6273016#comment-1219199) as of Firefox 31 (in Nightly build as of May 2014). Let's see what can be done in the meanwhile.
 
 How to ~~remove~~ hide the select arrow in Firefox using `-moz-appearance:none;`
 ===========================================================================================

diff --git a/How To Hide The Select Arrow On Firefox.md b/How To Hide The Select Arrow On Firefox.md
@@ -1,3 +1,5 @@
+** Edit: this trick [stopped working](https://gist.github.com/joaocunha/6273016#comment-1219199) as of Firefox 31 (in Nightly build as of May 2014). Let's see what can be done in the meanwhile. **
+
 How to ~~remove~~ hide the select arrow in Firefox using `-moz-appearance:none;`
 ===========================================================================================
 

diff --git a/How To Hide The Select Arrow On Firefox.md b/How To Hide The Select Arrow On Firefox.md
@@ -1,4 +1,4 @@
-How to ~~remove~~ hide the `<select>` arrow in Firefox using `-moz-appearance:none;`
+How to ~~remove~~ hide the select arrow in Firefox using `-moz-appearance:none;`
 ===========================================================================================
 
 tl;dr (or, the fix)

diff --git a/How To Hide The Select Arrow On Firefox.md b/How To Hide The Select Arrow On Firefox.md
@@ -54,5 +54,7 @@ Follow the guy
 [@joaocunha](http://twitter.com/joaocunha)
 
 <sub><sup>[1]</sup> Thanks to [Binyamin](https://bugzilla.mozilla.org/show_bug.cgi?id=649849#c85) for improving it from 1px to 0.01px.</sub>
+
 <sub><sup>[2]</sup> Thanks to [RussellUresti](http://stackoverflow.com/questions/5912791/how-to-remove-the-arrow-from-a-select-tag-in-firefox/18317228#comment26925917_18317228) for noticing the white space.</sub>
+
 <sub><sup>[3]</sup> Thanks to [MathiasaurusRex](http://stackoverflow.com/questions/6787667/what-is-the-correct-moz-appearance-value-to-hide-dropdown-arrow-of-a-select/18327666?noredirect=1#comment33135951_18327666) for noticing the zoom issue.</sub>
diff --git a/How To Hide The Select Arrow On Firefox.md b/How To Hide The Select Arrow On Firefox.md
@@ -43,6 +43,7 @@ Final considerations
 * Turns out that **Windows doesn't require** the `-moz-appearance: none;` declaration at all. Tested on 8;
 * **Firefox for Android** needs the whole `width` of the arrow as `text-indent`. It means you need to set it to at least `5px`, but take care since **Firefox seems to double the `text-indent` value on `<select>` elements**.
 * Zooming out (ctrl mousewheeldown, ctrl -, etc) reveals<sup>[3]</sup> the default arrow. No big deal;
+* The `appearance` attribute is not well supported through browsers, so take this fix with a grain of salt when developing your crossbrowser solution. 
 
 Support
 ------------------------------------------------------------
@@ -53,5 +54,5 @@ Follow the guy
 [@joaocunha](http://twitter.com/joaocunha)
 
 <sub><sup>[1]</sup> Thanks to [Binyamin](https://bugzilla.mozilla.org/show_bug.cgi?id=649849#c85) for improving it from 1px to 0.01px.</sub>
-<sup>[2]</sup> Thanks to [RussellUresti](http://stackoverflow.com/questions/5912791/how-to-remove-the-arrow-from-a-select-tag-in-firefox/18317228#comment26925917_18317228) for noticing the white space.</sub>
+<sub><sup>[2]</sup> Thanks to [RussellUresti](http://stackoverflow.com/questions/5912791/how-to-remove-the-arrow-from-a-select-tag-in-firefox/18317228#comment26925917_18317228) for noticing the white space.</sub>
 <sub><sup>[3]</sup> Thanks to [MathiasaurusRex](http://stackoverflow.com/questions/6787667/what-is-the-correct-moz-appearance-value-to-hide-dropdown-arrow-of-a-select/18327666?noredirect=1#comment33135951_18327666) for noticing the zoom issue.</sub>
diff --git a/How To Hide The Select Arrow On Firefox.md b/How To Hide The Select Arrow On Firefox.md
@@ -41,4 +41,17 @@ Final considerations
 * **Chrome doesn't support the `text-overflow:''`**. No evenly-cut text;
 * Your best bet is to set some `padding-right` in order to provide right space for your styled version of the arrow. Just keep in mind that Firefox will take the ghost arrow width into account;
 * Turns out that **Windows doesn't require** the `-moz-appearance: none;` declaration at all. Tested on 8;
-* **Firefox for Android** needs the whole `width` of the arrow as `text-indent`. It means you need to set it to at least `5px`, but take care since **Firefox seems to double the `text-indent` value on 
+* **Firefox for Android** needs the whole `width` of the arrow as `text-indent`. It means you need to set it to at least `5px`, but take care since **Firefox seems to double the `text-indent` value on `<select>` elements**.
+* Zooming out (ctrl mousewheeldown, ctrl -, etc) reveals<sup>[3]</sup> the default arrow. No big deal;
+
+Support
+------------------------------------------------------------
+*Ubuntu*, *Windows*, *Mac*, *Android 4.3*.
+
+Follow the guy
+------------------------------------------------------------
+[@joaocunha](http://twitter.com/joaocunha)
+
+<sub><sup>[1]</sup> Thanks to [Binyamin](https://bugzilla.mozilla.org/show_bug.cgi?id=649849#c85) for improving it from 1px to 0.01px.</sub>
+<sup>[2]</sup> Thanks to [RussellUresti](http://stackoverflow.com/questions/5912791/how-to-remove-the-arrow-from-a-select-tag-in-firefox/18317228#comment26925917_18317228) for noticing the white space.</sub>
+<sub><sup>[3]</sup> Thanks to [MathiasaurusRex](http://stackoverflow.com/questions/6787667/what-is-the-correct-moz-appearance-value-to-hide-dropdown-arrow-of-a-select/18327666?noredirect=1#comment33135951_18327666) for noticing the zoom issue.</sub>
diff --git a/How To Hide The Select Arrow On Firefox.md b/How To Hide The Select Arrow On Firefox.md
@@ -1,15 +1,15 @@
 How to ~~remove~~ hide the `<select>` arrow in Firefox using `-moz-appearance:none;`
 ===========================================================================================
 
-tl;dr
+tl;dr (or, the fix)
 ------------------------------------------------------------
 1.  Set `-moz-appearance` to `none`. This will "reset" the styling of the element;
 2.  Set `text-indent` to `0.01px`. This will "push" the text a tiny bit<sup>[1]</sup> to the right;
 3.  Set `text-overflow` to `''` (an empty string). This will change anything that extends beyond the element's width to... *nothing* - **and this includes the infamous arrow**!
 
 ![Firefox select element with no arrow](https://dl.dropboxusercontent.com/u/4533940/firefox-arrow/ff-fixed.png "Screw you, arrow!")
 
-**Voilà! A wild select appears!**
+**Continue reading for the full lowdown.**
 
 Background
 ------------------------------------------------------------
@@ -28,8 +28,6 @@ The bug
 
 As [this 2011 bug report](https://bugzilla.mozilla.org/show_bug.cgi?id=649849) states, there is an issue regarding Firefox's `-moz-appearance` and `<select>` elements: it was supposed to *ditch* the `<select>`'s arrow (like Chrome's implementation) but it simply doesn't. People were raging about the subject [all](http://stackoverflow.com/questions/5912791/how-to-remove-the-arrow-from-a-select-tag-in-firefox) [over](http://css-tricks.com/almanac/properties/a/appearance/) [the](http://stackoverflow.com/questions/6787667/what-is-the-correct-moz-appearance-value-to-hide-dropdown-arrow-of-a-select/18327666) [internetz](http://stackoverflow.com/questions/17782963/hiding-default-select-arrow-in-firefox-22/).
 
-*Until now*.
-
 Live example
 ------------------------------------------------------------
 http://codepen.io/joaocunha/pen/qLgCG
@@ -43,18 +41,4 @@ Final considerations
 * **Chrome doesn't support the `text-overflow:''`**. No evenly-cut text;
 * Your best bet is to set some `padding-right` in order to provide right space for your styled version of the arrow. Just keep in mind that Firefox will take the ghost arrow width into account;
 * Turns out that **Windows doesn't require** the `-moz-appearance: none;` declaration at all. Tested on 8;
-* **Firefox for Android** needs the whole `width` of the arrow as `text-indent`. It means you need to set it to at least `5px`, but take care since **Firefox seems to double the `text-indent` value on `<select>` elements**.
-* Zooming out (ctrl mousewheeldown, ctrl -, etc) reveals<sup>[3]</sup> the default arrow. No big deal;
-
-And it's as ~~hacky~~ easy as that!
-------------------------------------------------------------
-Tested on *Ubuntu*, *Windows 8* and *Mac*, all with recent versions (20.x.x at least).
-
-**Follow me on twitter: [@joaocunha](http://twitter.com/joaocunha)**
-
-<sub><sup>[1]</sup> Thanks to [Binyamin](https://bugzilla.mozilla.org/show_bug.cgi?id=649849#c85) for improving it from 1px to 0.01px.</sub>
-
-<sub><sup>[2]</sup> Thanks to [RussellUresti](http://stackoverflow.com/questions/5912791/how-to-remove-the-arrow-from-a-select-tag-in-firefox/18317228#comment26925917_18317228) for noticing the white space.</sub>
-
-<sub><sup>[3]</sup> Thanks to [MathiasaurusRex](http://stackoverflow.com/questions/6787667/what-is-the-correct-moz-appearance-value-to-hide-dropdown-arrow-of-a-select/18327666?noredirect=1#comment33135951_18327666) for noticing the zoom issue.</sub>
-
+* **Firefox for Android** needs the whole `width` of the arrow as `text-indent`. It means you need to set it to at least `5px`, but take care since **Firefox seems to double the `text-indent` value on 
diff --git a/How To Hide The Select Arrow On Firefox.md b/How To Hide The Select Arrow On Firefox.md
@@ -1,6 +1,16 @@
 How to ~~remove~~ hide the `<select>` arrow in Firefox using `-moz-appearance:none;`
 ===========================================================================================
 
+tl;dr
+------------------------------------------------------------
+1.  Set `-moz-appearance` to `none`. This will "reset" the styling of the element;
+2.  Set `text-indent` to `0.01px`. This will "push" the text a tiny bit<sup>[1]</sup> to the right;
+3.  Set `text-overflow` to `''` (an empty string). This will change anything that extends beyond the element's width to... *nothing* - **and this includes the infamous arrow**!
+
+![Firefox select element with no arrow](https://dl.dropboxusercontent.com/u/4533940/firefox-arrow/ff-fixed.png "Screw you, arrow!")
+
+**Voilà! A wild select appears!**
+
 Background
 ------------------------------------------------------------
 I was experimenting on custom styling the `<select>` elements of a form I was building. One of the things I tried implementing was truncating the text with an ellipsis in case it extended beyond the `<select>`'s width. It didn't look consistent through browsers, but I've accidentally discovered something really nice.
@@ -20,18 +30,6 @@ As [this 2011 bug report](https://bugzilla.mozilla.org/show_bug.cgi?id=649849) s
 
 *Until now*.
 
-The fix
-------------------------------------------------------------
-Here is the clever workaround to make it work:
-
-1.  Set `-moz-appearance` to `none`. This will "reset" the styling of the element;
-2.  Set `text-indent` to `0.01px`. This will "push" the text a tiny bit<sup>[1]</sup> to the right;
-3.  Set `text-overflow` to `''` (an empty string). This will change anything that extends beyond the element's width to... *nothing* - **and this includes the infamous arrow**!
-
-![Firefox select element with no arrow](https://dl.dropboxusercontent.com/u/4533940/firefox-arrow/ff-fixed.png "Screw you, arrow!")
-
-**Voilà! A wild select appears!**
-
 Live example
 ------------------------------------------------------------
 http://codepen.io/joaocunha/pen/qLgCG

diff --git a/How To Hide The Select Arrow On Firefox.md b/How To Hide The Select Arrow On Firefox.md
@@ -46,6 +46,7 @@ Final considerations
 * Your best bet is to set some `padding-right` in order to provide right space for your styled version of the arrow. Just keep in mind that Firefox will take the ghost arrow width into account;
 * Turns out that **Windows doesn't require** the `-moz-appearance: none;` declaration at all. Tested on 8;
 * **Firefox for Android** needs the whole `width` of the arrow as `text-indent`. It means you need to set it to at least `5px`, but take care since **Firefox seems to double the `text-indent` value on `<select>` elements**.
+* Zooming out (ctrl mousewheeldown, ctrl -, etc) reveals<sup>[3]</sup> the default arrow. No big deal;
 
 And it's as ~~hacky~~ easy as that!
 ------------------------------------------------------------
@@ -55,4 +56,7 @@ Tested on *Ubuntu*, *Windows 8* and *Mac*, all with recent versions (20.x.x at l
 
 <sub><sup>[1]</sup> Thanks to [Binyamin](https://bugzilla.mozilla.org/show_bug.cgi?id=649849#c85) for improving it from 1px to 0.01px.</sub>
 
-<sub><sup>[2]</sup> Thanks to [RussellUresti](http://stackoverflow.com/questions/5912791/how-to-remove-the-arrow-from-a-select-tag-in-firefox/18317228#comment26925917_18317228) for noticing the white space.</sub>
+<sub><sup>[2]</sup> Thanks to [RussellUresti](http://stackoverflow.com/questions/5912791/how-to-remove-the-arrow-from-a-select-tag-in-firefox/18317228#comment26925917_18317228) for noticing the white space.</sub>
+
+<sub><sup>[3]</sup> Thanks to [MathiasaurusRex](http://stackoverflow.com/questions/6787667/what-is-the-correct-moz-appearance-value-to-hide-dropdown-arrow-of-a-select/18327666?noredirect=1#comment33135951_18327666) for noticing the zoom issue.</sub>
+
diff --git a/hide-select-arrow-firefox.md → How To Hide The Select Arrow On Firefox.md b/hide-select-arrow-firefox.md → How To Hide The Select Arrow On Firefox.md
diff --git a/hide-select-arrow-firefox.md b/hide-select-arrow-firefox.md
@@ -45,7 +45,7 @@ Final considerations
 * **Chrome doesn't support the `text-overflow:''`**. No evenly-cut text;
 * Your best bet is to set some `padding-right` in order to provide right space for your styled version of the arrow. Just keep in mind that Firefox will take the ghost arrow width into account;
 * Turns out that **Windows doesn't require** the `-moz-appearance: none;` declaration at all. Tested on 8;
-* **Firefox for Android** needs the whole `width` of the arrow as `text-indent`. It means you need to set it to at least `5px`, but take care since **Firefox seems to double the `text-indent` value**.
+* **Firefox for Android** needs the whole `width` of the arrow as `text-indent`. It means you need to set it to at least `5px`, but take care since **Firefox seems to double the `text-indent` value on `<select>` elements**.
 
 And it's as ~~hacky~~ easy as that!
 ------------------------------------------------------------

diff --git a/hide-select-arrow-firefox.md b/hide-select-arrow-firefox.md
@@ -45,7 +45,7 @@ Final considerations
 * **Chrome doesn't support the `text-overflow:''`**. No evenly-cut text;
 * Your best bet is to set some `padding-right` in order to provide right space for your styled version of the arrow. Just keep in mind that Firefox will take the ghost arrow width into account;
 * Turns out that **Windows doesn't require** the `-moz-appearance: none;` declaration at all. Tested on 8;
-* **Firefox for Android doesn't hide the arrow**. I'm looking for a fix.
+* **Firefox for Android** needs the whole `width` of the arrow as `text-indent`. It means you need to set it to at least `5px`, but take care since **Firefox seems to double the `text-indent` value**.
 
 And it's as ~~hacky~~ easy as that!
 ------------------------------------------------------------

diff --git a/hide-select-arrow-firefox.md b/hide-select-arrow-firefox.md
@@ -44,7 +44,8 @@ Final considerations
 * **Chrome removes the arrow** by default with `-webkit-appearance:none;` instead of hiding. No white space on the right;
 * **Chrome doesn't support the `text-overflow:''`**. No evenly-cut text;
 * Your best bet is to set some `padding-right` in order to provide right space for your styled version of the arrow. Just keep in mind that Firefox will take the ghost arrow width into account;
-* Turns out that Windows doesn't require the `-moz-appearance: none;` declaration at all. Tested on 8.
+* Turns out that **Windows doesn't require** the `-moz-appearance: none;` declaration at all. Tested on 8;
+* **Firefox for Android doesn't hide the arrow**. I'm looking for a fix.
 
 And it's as ~~hacky~~ easy as that!
 ------------------------------------------------------------

diff --git a/hide-select-arrow-firefox.md b/hide-select-arrow-firefox.md
@@ -34,7 +34,7 @@ Here is the clever workaround to make it work:
 
 Live example
 ------------------------------------------------------------
-http://jsfiddle.net/joaocunha/RUEbp/1/
+http://codepen.io/joaocunha/pen/qLgCG
 
 <sub>(Firefox only, duh)</sub>