Modify the Select File icon by default <h: InputFile>

Question

I would like to know if there is a method for marking and renaming text displayed by JSF Choose a Filewhen I use a tag <h:InputFile>in JSF.

Answer 1

This is not possible with native HTML. The appearance and shortcut of the button are browser dependent. The specific “Select file” label is recognized as one of Chrome with a package in English (for example, FireFox uses “Browse ...”). Since JSF in the context of this question is just an HTML code generator, it also cannot do it for you.

. HTML + CSS, Q & A: = "" , .

- <h:outputLabel for>, , . , , . . h: outputLabel " for " .

IE ( IE):

<h:outputLabel for="file" value="Pick a file" styleClass="upload" />
<h:inputFile id="file" value="#{bean.file}" styleClass="upload" />

label.upload {
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;
    padding: 2px;
    cursor: pointer;
}

input.upload {
    display: none;
}

IE9 +, appearance: button background border. . , , , .

label.upload {
    padding: 2px;
    border: 1px solid gray;
    border-radius: 2px;
    background: lightgray;
    cursor: pointer;
}

IE6-8, , , CSS JSF HTML + CSS (+ JS).

- JSF, , ​​ PrimeFaces, jQuery. <p:fileUpload> .