Customize upload button

Question

I want to wrap a hidden file upload button so I can localize the text. That works. However I now want to wrap label and upload button with a button rather than with a raw filled in div. Every (3) css button library I have tried shows the button, poorly, File Open Dialog appears when file selected and Open click blank screen or an immediate post. Is this just not possible or recommend an alternative that wraps a button around a localized file input?

> <style>
>     .ui-widget-header, .ui-state-default, ui-button {
>         background: #b9cd6d;
>         border: 1px solid #b9cd6d;
>         color: #FFFFFF;
>         font-weight: bold;
>     }
> 
>     input[type="file"] {
>         display: none;
>     }
> 
>     .custom-file-upload {
>         border: 1px solid #ccc;
>         display: inline-block;
>         padding: 6px 12px;
>         cursor: pointer;
>     } 
</style>

<div class="form-group"> <button class="btn-sm">
                        <label for="ediFile" class="custom-file-upload btn btn-default">
                            <span th:text="#{addYourEDI}"></span>
                            <input type="file" name="ediFile" multiple="multiple"
                                   accept=".pdf,.xls,.xlsx,.csv,.zip" style="visibility: hidden;

position: absolute;" class="btn btn-outline-secondary" id="ediFile" onchange="ediFileChange()"/>

Answer 1

Mea culpa. Syntax error. Sorry for the flak.