Replace Browser's Native File Input UI with a Styled Label / Button

I'm trying to put a spin on this article to provide a nicer-looking user interface for a file upload input. In short, it's primarily a CSS-only method for hiding the browser's native input button and replacing it with a style label. The project I want to use it in also happens to be an Ionic3 project, and so I'd like the label that to be styled to look like a natural ion-button.

The code from the article works great if the label contains a plain text, but if I try and embed a button-element within the label, I get no love, regardless of whether I use the ion-button attribute incidentally.

  .inputfile {

    width: 0.1px;

    height: 0.1px;

    opacity: 0;

    overflow: hidden;

    position: absolute;

    z-index: -1;

  }



  .inputfile + label {

    display: inline-block;

  }



  .inputfile + label {

    cursor: pointer; /* "hand" cursor */

  }

<input type="file" name="file" id="file" class="inputfile" />

<label for="file">Choose a file text label</label> &lt;-- this works

<br/><br/>

<input type="file" name="file" id="file" class="inputfile" />

<label for="file">

  <button>Choose a file button label</button>

</label> &lt;-- this doesn't work

edited Jan 2 at 21:55

asked Jan 2 at 21:48

vicatcu

4,09832847

SO suggested my title was not great, if you have a suggestion for a better one feel free to change it.

– vicatcu
Jan 2 at 21:48

1

I use to hide the input completely and create a styled button, then with javascript(jQuery) onclick on the button I trigger a click on the input...

– Vickel
Jan 2 at 22:00

add a comment |

  .inputfile {

    width: 0.1px;

    height: 0.1px;

    opacity: 0;

    overflow: hidden;

    position: absolute;

    z-index: -1;

  }



  .inputfile + label {

    display: inline-block;

  }



  .inputfile + label {

    cursor: pointer; /* "hand" cursor */

  }

<input type="file" name="file" id="file" class="inputfile" />

<label for="file">Choose a file text label</label> &lt;-- this works

<br/><br/>

<input type="file" name="file" id="file" class="inputfile" />

<label for="file">

  <button>Choose a file button label</button>

</label> &lt;-- this doesn't work

edited Jan 2 at 21:55

asked Jan 2 at 21:48

vicatcu

4,09832847

SO suggested my title was not great, if you have a suggestion for a better one feel free to change it.

– vicatcu
Jan 2 at 21:48

1

I use to hide the input completely and create a styled button, then with javascript(jQuery) onclick on the button I trigger a click on the input...

– Vickel
Jan 2 at 22:00

add a comment |

  .inputfile {

    width: 0.1px;

    height: 0.1px;

    opacity: 0;

    overflow: hidden;

    position: absolute;

    z-index: -1;

  }



  .inputfile + label {

    display: inline-block;

  }



  .inputfile + label {

    cursor: pointer; /* "hand" cursor */

  }

<input type="file" name="file" id="file" class="inputfile" />

<label for="file">Choose a file text label</label> &lt;-- this works

<br/><br/>

<input type="file" name="file" id="file" class="inputfile" />

<label for="file">

  <button>Choose a file button label</button>

</label> &lt;-- this doesn't work

edited Jan 2 at 21:55

asked Jan 2 at 21:48

vicatcu

4,09832847

  .inputfile {

    width: 0.1px;

    height: 0.1px;

    opacity: 0;

    overflow: hidden;

    position: absolute;

    z-index: -1;

  }



  .inputfile + label {

    display: inline-block;

  }



  .inputfile + label {

    cursor: pointer; /* "hand" cursor */

  }

<input type="file" name="file" id="file" class="inputfile" />

<label for="file">Choose a file text label</label> &lt;-- this works

<br/><br/>

<input type="file" name="file" id="file" class="inputfile" />

<label for="file">

  <button>Choose a file button label</button>

</label> &lt;-- this doesn't work

  .inputfile {

    width: 0.1px;

    height: 0.1px;

    opacity: 0;

    overflow: hidden;

    position: absolute;

    z-index: -1;

  }



  .inputfile + label {

    display: inline-block;

  }



  .inputfile + label {

    cursor: pointer; /* "hand" cursor */

  }

<input type="file" name="file" id="file" class="inputfile" />

<label for="file">Choose a file text label</label> &lt;-- this works

<br/><br/>

<input type="file" name="file" id="file" class="inputfile" />

<label for="file">

  <button>Choose a file button label</button>

</label> &lt;-- this doesn't work

  .inputfile {

    width: 0.1px;

    height: 0.1px;

    opacity: 0;

    overflow: hidden;

    position: absolute;

    z-index: -1;

  }



  .inputfile + label {

    display: inline-block;

  }



  .inputfile + label {

    cursor: pointer; /* "hand" cursor */

  }

<input type="file" name="file" id="file" class="inputfile" />

<label for="file">Choose a file text label</label> &lt;-- this works

<br/><br/>

<input type="file" name="file" id="file" class="inputfile" />

<label for="file">

  <button>Choose a file button label</button>

</label> &lt;-- this doesn't work

html css file-upload ionic3

edited Jan 2 at 21:55

asked Jan 2 at 21:48

vicatcu

4,09832847

edited Jan 2 at 21:55

asked Jan 2 at 21:48

vicatcu

4,09832847

edited Jan 2 at 21:55

asked Jan 2 at 21:48

vicatcu

4,09832847

asked Jan 2 at 21:48

vicatcu

4,09832847

asked Jan 2 at 21:48

vicatcu

4,09832847

SO suggested my title was not great, if you have a suggestion for a better one feel free to change it.

– vicatcu
Jan 2 at 21:48

1

I use to hide the input completely and create a styled button, then with javascript(jQuery) onclick on the button I trigger a click on the input...

– Vickel
Jan 2 at 22:00

add a comment |

SO suggested my title was not great, if you have a suggestion for a better one feel free to change it.

– vicatcu
Jan 2 at 21:48

1

I use to hide the input completely and create a styled button, then with javascript(jQuery) onclick on the button I trigger a click on the input...

– Vickel
Jan 2 at 22:00

SO suggested my title was not great, if you have a suggestion for a better one feel free to change it.

– vicatcu
Jan 2 at 21:48

I use to hide the input completely and create a styled button, then with javascript(jQuery) onclick on the button I trigger a click on the input...

– Vickel
Jan 2 at 22:00

add a comment |

2 Answers
2

active

oldest

votes

This isn't a pure CSS solution or specific to Ionic, but in general for a button to stand in as the UI for a hidden file input element, the following appears to work. You can put a click handler on the button, and then in that handler, call the input element's DOM click handler:

<button (click)="handleClick($event)">Choose a file</button>

// Grab the element (Ionic/Angular)

    @ViewChild('fileInput') fileInput;

handleClick($event) {

  this.fileInput._native.nativeElement.click();

}

answered Jan 3 at 13:00

Joe Nolan

335

add a comment |

You are probably better off styling the text label to look like a button.

  .inputfile {

    width: 0.1px;

    height: 0.1px;

    opacity: 0;

    overflow: hidden;

    position: absolute;

    z-index: -1;

  }



  .inputfile + label {

    display: inline-block;

  }



  .inputfile + label {

    cursor: pointer; /* "hand" cursor */

  }

  .button {

    -webkit-appearance: button;

    -webkit-writing-mode: horizontal-tb !important;

    text-rendering: auto;

    color: initial;

    letter-spacing: normal;

    word-spacing: normal;

    text-transform: none;

    text-indent: 0px;

    text-shadow: none;

    display: inline-block;

    text-align: start;

    margin: 0em;

    font: 400 11px system-ui;

    align-items: flex-start;

    text-align: center;

    cursor: default;

    color: buttontext;

    background-color: buttonface;

    box-sizing: border-box;

    padding: 2px 6px 3px;

    border-width: 2px;

    border-style: outset;

    border-color: buttonface;

    border-image: initial;

    border-color: rgb(216, 216, 216) rgb(209, 209, 209) rgb(186, 186, 186);

    border-style: solid;

    border-width: 1px;

    padding: 1px 7px 2px;

  }

<input type="file" name="file" id="file" class="inputfile" />

<label for="file" class="button">Choose a file text label</label> &lt;-- this works

<br/><br/>

<input type="file" name="file" id="file" class="inputfile" />

<label for="file">

  <button>Choose a file button label</button>

</label> &lt;-- this doesn't work

answered Jan 3 at 7:45

Sheedo

462410

add a comment |

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54013600%2freplace-browsers-native-file-input-ui-with-a-styled-label-button%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

<button (click)="handleClick($event)">Choose a file</button>

// Grab the element (Ionic/Angular)

    @ViewChild('fileInput') fileInput;

handleClick($event) {

  this.fileInput._native.nativeElement.click();

}

answered Jan 3 at 13:00

Joe Nolan

335

add a comment |

<button (click)="handleClick($event)">Choose a file</button>

// Grab the element (Ionic/Angular)

    @ViewChild('fileInput') fileInput;

handleClick($event) {

  this.fileInput._native.nativeElement.click();

}

answered Jan 3 at 13:00

Joe Nolan

335

add a comment |

<button (click)="handleClick($event)">Choose a file</button>

// Grab the element (Ionic/Angular)

    @ViewChild('fileInput') fileInput;

handleClick($event) {

  this.fileInput._native.nativeElement.click();

}

answered Jan 3 at 13:00

Joe Nolan

335

<button (click)="handleClick($event)">Choose a file</button>

// Grab the element (Ionic/Angular)

    @ViewChild('fileInput') fileInput;

handleClick($event) {

  this.fileInput._native.nativeElement.click();

}

<button (click)="handleClick($event)">Choose a file</button>

<button (click)="handleClick($event)">Choose a file</button>

// Grab the element (Ionic/Angular)

    @ViewChild('fileInput') fileInput;

handleClick($event) {

  this.fileInput._native.nativeElement.click();

}

// Grab the element (Ionic/Angular)

    @ViewChild('fileInput') fileInput;

handleClick($event) {

  this.fileInput._native.nativeElement.click();

}

answered Jan 3 at 13:00

Joe Nolan

335

answered Jan 3 at 13:00

Joe Nolan

335

answered Jan 3 at 13:00

Joe Nolan

335

answered Jan 3 at 13:00

Joe Nolan

335

add a comment |

You are probably better off styling the text label to look like a button.

  .inputfile {

    width: 0.1px;

    height: 0.1px;

    opacity: 0;

    overflow: hidden;

    position: absolute;

    z-index: -1;

  }



  .inputfile + label {

    display: inline-block;

  }



  .inputfile + label {

    cursor: pointer; /* "hand" cursor */

  }

  .button {

    -webkit-appearance: button;

    -webkit-writing-mode: horizontal-tb !important;

    text-rendering: auto;

    color: initial;

    letter-spacing: normal;

    word-spacing: normal;

    text-transform: none;

    text-indent: 0px;

    text-shadow: none;

    display: inline-block;

    text-align: start;

    margin: 0em;

    font: 400 11px system-ui;

    align-items: flex-start;

    text-align: center;

    cursor: default;

    color: buttontext;

    background-color: buttonface;

    box-sizing: border-box;

    padding: 2px 6px 3px;

    border-width: 2px;

    border-style: outset;

    border-color: buttonface;

    border-image: initial;

    border-color: rgb(216, 216, 216) rgb(209, 209, 209) rgb(186, 186, 186);

    border-style: solid;

    border-width: 1px;

    padding: 1px 7px 2px;

  }

<input type="file" name="file" id="file" class="inputfile" />

<label for="file" class="button">Choose a file text label</label> &lt;-- this works

<br/><br/>

<input type="file" name="file" id="file" class="inputfile" />

<label for="file">

  <button>Choose a file button label</button>

</label> &lt;-- this doesn't work

answered Jan 3 at 7:45

Sheedo

462410

add a comment |

You are probably better off styling the text label to look like a button.

  .inputfile {

    width: 0.1px;

    height: 0.1px;

    opacity: 0;

    overflow: hidden;

    position: absolute;

    z-index: -1;

  }



  .inputfile + label {

    display: inline-block;

  }



  .inputfile + label {

    cursor: pointer; /* "hand" cursor */

  }

  .button {

    -webkit-appearance: button;

    -webkit-writing-mode: horizontal-tb !important;

    text-rendering: auto;

    color: initial;

    letter-spacing: normal;

    word-spacing: normal;

    text-transform: none;

    text-indent: 0px;

    text-shadow: none;

    display: inline-block;

    text-align: start;

    margin: 0em;

    font: 400 11px system-ui;

    align-items: flex-start;

    text-align: center;

    cursor: default;

    color: buttontext;

    background-color: buttonface;

    box-sizing: border-box;

    padding: 2px 6px 3px;

    border-width: 2px;

    border-style: outset;

    border-color: buttonface;

    border-image: initial;

    border-color: rgb(216, 216, 216) rgb(209, 209, 209) rgb(186, 186, 186);

    border-style: solid;

    border-width: 1px;

    padding: 1px 7px 2px;

  }

<input type="file" name="file" id="file" class="inputfile" />

<label for="file" class="button">Choose a file text label</label> &lt;-- this works

<br/><br/>

<input type="file" name="file" id="file" class="inputfile" />

<label for="file">

  <button>Choose a file button label</button>

</label> &lt;-- this doesn't work

answered Jan 3 at 7:45

Sheedo

462410

add a comment |

You are probably better off styling the text label to look like a button.

  .inputfile {

    width: 0.1px;

    height: 0.1px;

    opacity: 0;

    overflow: hidden;

    position: absolute;

    z-index: -1;

  }



  .inputfile + label {

    display: inline-block;

  }



  .inputfile + label {

    cursor: pointer; /* "hand" cursor */

  }

  .button {

    -webkit-appearance: button;

    -webkit-writing-mode: horizontal-tb !important;

    text-rendering: auto;

    color: initial;

    letter-spacing: normal;

    word-spacing: normal;

    text-transform: none;

    text-indent: 0px;

    text-shadow: none;

    display: inline-block;

    text-align: start;

    margin: 0em;

    font: 400 11px system-ui;

    align-items: flex-start;

    text-align: center;

    cursor: default;

    color: buttontext;

    background-color: buttonface;

    box-sizing: border-box;

    padding: 2px 6px 3px;

    border-width: 2px;

    border-style: outset;

    border-color: buttonface;

    border-image: initial;

    border-color: rgb(216, 216, 216) rgb(209, 209, 209) rgb(186, 186, 186);

    border-style: solid;

    border-width: 1px;

    padding: 1px 7px 2px;

  }

<input type="file" name="file" id="file" class="inputfile" />

<label for="file" class="button">Choose a file text label</label> &lt;-- this works

<br/><br/>

<input type="file" name="file" id="file" class="inputfile" />

<label for="file">

  <button>Choose a file button label</button>

</label> &lt;-- this doesn't work

answered Jan 3 at 7:45

Sheedo

462410

You are probably better off styling the text label to look like a button.

  .inputfile {

    width: 0.1px;

    height: 0.1px;

    opacity: 0;

    overflow: hidden;

    position: absolute;

    z-index: -1;

  }



  .inputfile + label {

    display: inline-block;

  }



  .inputfile + label {

    cursor: pointer; /* "hand" cursor */

  }

  .button {

    -webkit-appearance: button;

    -webkit-writing-mode: horizontal-tb !important;

    text-rendering: auto;

    color: initial;

    letter-spacing: normal;

    word-spacing: normal;

    text-transform: none;

    text-indent: 0px;

    text-shadow: none;

    display: inline-block;

    text-align: start;

    margin: 0em;

    font: 400 11px system-ui;

    align-items: flex-start;

    text-align: center;

    cursor: default;

    color: buttontext;

    background-color: buttonface;

    box-sizing: border-box;

    padding: 2px 6px 3px;

    border-width: 2px;

    border-style: outset;

    border-color: buttonface;

    border-image: initial;

    border-color: rgb(216, 216, 216) rgb(209, 209, 209) rgb(186, 186, 186);

    border-style: solid;

    border-width: 1px;

    padding: 1px 7px 2px;

  }

<input type="file" name="file" id="file" class="inputfile" />

<label for="file" class="button">Choose a file text label</label> &lt;-- this works

<br/><br/>

<input type="file" name="file" id="file" class="inputfile" />

<label for="file">

  <button>Choose a file button label</button>

</label> &lt;-- this doesn't work

  .inputfile {

    width: 0.1px;

    height: 0.1px;

    opacity: 0;

    overflow: hidden;

    position: absolute;

    z-index: -1;

  }



  .inputfile + label {

    display: inline-block;

  }



  .inputfile + label {

    cursor: pointer; /* "hand" cursor */

  }

  .button {

    -webkit-appearance: button;

    -webkit-writing-mode: horizontal-tb !important;

    text-rendering: auto;

    color: initial;

    letter-spacing: normal;

    word-spacing: normal;

    text-transform: none;

    text-indent: 0px;

    text-shadow: none;

    display: inline-block;

    text-align: start;

    margin: 0em;

    font: 400 11px system-ui;

    align-items: flex-start;

    text-align: center;

    cursor: default;

    color: buttontext;

    background-color: buttonface;

    box-sizing: border-box;

    padding: 2px 6px 3px;

    border-width: 2px;

    border-style: outset;

    border-color: buttonface;

    border-image: initial;

    border-color: rgb(216, 216, 216) rgb(209, 209, 209) rgb(186, 186, 186);

    border-style: solid;

    border-width: 1px;

    padding: 1px 7px 2px;

  }

<input type="file" name="file" id="file" class="inputfile" />

<label for="file" class="button">Choose a file text label</label> &lt;-- this works

<br/><br/>

<input type="file" name="file" id="file" class="inputfile" />

<label for="file">

  <button>Choose a file button label</button>

</label> &lt;-- this doesn't work

  .inputfile {

    width: 0.1px;

    height: 0.1px;

    opacity: 0;

    overflow: hidden;

    position: absolute;

    z-index: -1;

  }



  .inputfile + label {

    display: inline-block;

  }



  .inputfile + label {

    cursor: pointer; /* "hand" cursor */

  }

  .button {

    -webkit-appearance: button;

    -webkit-writing-mode: horizontal-tb !important;

    text-rendering: auto;

    color: initial;

    letter-spacing: normal;

    word-spacing: normal;

    text-transform: none;

    text-indent: 0px;

    text-shadow: none;

    display: inline-block;

    text-align: start;

    margin: 0em;

    font: 400 11px system-ui;

    align-items: flex-start;

    text-align: center;

    cursor: default;

    color: buttontext;

    background-color: buttonface;

    box-sizing: border-box;

    padding: 2px 6px 3px;

    border-width: 2px;

    border-style: outset;

    border-color: buttonface;

    border-image: initial;

    border-color: rgb(216, 216, 216) rgb(209, 209, 209) rgb(186, 186, 186);

    border-style: solid;

    border-width: 1px;

    padding: 1px 7px 2px;

  }

<input type="file" name="file" id="file" class="inputfile" />

<label for="file" class="button">Choose a file text label</label> &lt;-- this works

<br/><br/>

<input type="file" name="file" id="file" class="inputfile" />

<label for="file">

  <button>Choose a file button label</button>

</label> &lt;-- this doesn't work

answered Jan 3 at 7:45

Sheedo

462410

answered Jan 3 at 7:45

Sheedo

462410

answered Jan 3 at 7:45

Sheedo

462410

answered Jan 3 at 7:45

Sheedo

462410

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

Search This Blog

Ufyukyu