Fix input file (attachment) styling for Firefox (#162)
The trick is to hide the input field and style the label instead.
This commit is contained in:
parent
2f856a8bc3
commit
7f6bfce7ba
@ -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);
|
||||
}
|
||||
|
||||
|
@ -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
|
||||
label [ class "form-control draft-attachment-input-label" ]
|
||||
[ input
|
||||
[ type_ "file"
|
||||
, id "draft-attachment"
|
||||
, class "form-control draft-attachment-input"
|
||||
, on "change" (Decode.succeed <| DraftEvent (UploadMedia "draft-attachment"))
|
||||
]
|
||||
[]
|
||||
, text ""
|
||||
]
|
||||
else
|
||||
text ""
|
||||
]
|
||||
|
Loading…
Reference in New Issue
Block a user