From 7f6bfce7bab8831fbeec7f7eda2664f5fce194d8 Mon Sep 17 00:00:00 2001
From: Vincent Jousse <vincent@jousse.org>
Date: Fri, 12 May 2017 11:41:53 +0200
Subject: [PATCH] Fix input file (attachment) styling for Firefox (#162)

The trick is to hide the input field and style the label instead.
---
 public/style.css   | 13 +++++++++----
 src/View/Draft.elm | 14 ++++++++------
 2 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/public/style.css b/public/style.css
index c8a1476..52ab656 100644
--- a/public/style.css
+++ b/public/style.css
@@ -444,16 +444,21 @@ li.load-more {
   background: rgba(0, 0, 0, 0.85);
 }
 
-.draft-attachment-input {
+#draft-attachment {
+    display:none;
+}
+.draft-attachment-input-label {
   display: block;
   position: relative;
   width: 100%;
   cursor: pointer;
   height: 38px;
   outline: 0;
+  background-color: transparent;
+  font-weight: normal;
 }
 
-.draft-attachment-input:after {
+.draft-attachment-input-label:after {
   background-image: linear-gradient(#484e55, #3a3f44 60%, #313539);
   color: #c8c8c8;
   line-height: 34px;
@@ -472,14 +477,14 @@ input.form-control[type=file] {
   background: none;
 }
 
-input[type=file]:focus {
+.draft-attachment-input-label:focus {
   outline: 0;
   outline-offset: 0;
   border-color: #000;
   box-shadow: none;
 }
 
-.draft-attachment-input:hover:after {
+.draft-attachment-input-label:hover:after {
   background-image: linear-gradient(#020202, #101112 40%, #141618);
 }
 
diff --git a/src/View/Draft.elm b/src/View/Draft.elm
index 3c159fb..7134275 100644
--- a/src/View/Draft.elm
+++ b/src/View/Draft.elm
@@ -323,13 +323,15 @@ fileUploadField draft =
                 button [ class "btn btn-default btn-loading", disabled True ]
                     [ text "Uploading media..." ]
               else if List.length draft.attachments < 4 then
-                input
-                    [ type_ "file"
-                    , id "draft-attachment"
-                    , class "form-control draft-attachment-input"
-                    , on "change" (Decode.succeed <| DraftEvent (UploadMedia "draft-attachment"))
+                label [ class "form-control draft-attachment-input-label" ]
+                    [ input
+                        [ type_ "file"
+                        , id "draft-attachment"
+                        , on "change" (Decode.succeed <| DraftEvent (UploadMedia "draft-attachment"))
+                        ]
+                        []
+                    , text ""
                     ]
-                    []
               else
                 text ""
             ]