Mixing
Replace Browser's Native File Input UI with a Styled Label / Button
2
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> <-- this works
<br/><br/>
<input type="file" name="file" id="file" class="inputfile" />
<label for="file">
<button>Choose a file button label</button>
</label> <-- this doesn't workhtml css file-upload ionic3
asked Jan 2 at 21:48
vicatcuvicatcu
4,09832847
add a comment |
2
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> <-- this works
<br/><br/>
<input type="file" name="file" id="file" class="inputfile" />
<label for="file">
<button>Choose a file button label</button>
</label> <-- this doesn't workhtml css file-upload ionic3
asked Jan 2 at 21:48
vicatcuvicatcu
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 |
2
2
2
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> <-- this works
<br/><br/>
<input type="file" name="file" id="file" class="inputfile" />
<label for="file">
<button>Choose a file button label</button>
</label> <-- this doesn't workhtml css file-upload ionic3
asked Jan 2 at 21:48
vicatcuvicatcu
4,09832847
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> <-- this works
<br/><br/>
<input type="file" name="file" id="file" class="inputfile" />
<label for="file">
<button>Choose a file button label</button>
</label> <-- 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> <-- this works
<br/><br/>
<input type="file" name="file" id="file" class="inputfile" />
<label for="file">
<button>Choose a file button label</button>
</label> <-- 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> <-- this works
<br/><br/>
<input type="file" name="file" id="file" class="inputfile" />
<label for="file">
<button>Choose a file button label</button>
</label> <-- this doesn't workhtml css file-upload ionic3
html css file-upload ionic3
asked Jan 2 at 21:48
vicatcuvicatcu
4,09832847
asked Jan 2 at 21:48
vicatcuvicatcu
4,09832847
edited Jan 2 at 21:55
vicatcu
asked Jan 2 at 21:48
vicatcuvicatcu
4,09832847
asked Jan 2 at 21:48
vicatcuvicatcu
4,09832847
asked Jan 2 at 21:48
vicatcuvicatcu
4,09832847
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
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
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
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
1
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 NolanJoe Nolan
335
add a comment |
0
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> <-- this works
<br/><br/>
<input type="file" name="file" id="file" class="inputfile" />
<label for="file">
<button>Choose a file button label</button>
</label> <-- this doesn't workanswered Jan 3 at 7:45
SheedoSheedo
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');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
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
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
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 NolanJoe Nolan
335
add a comment |
1
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 NolanJoe Nolan
335
add a comment |
1
1
1
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 NolanJoe Nolan
335
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();
}<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 NolanJoe Nolan
335
answered Jan 3 at 13:00
Joe NolanJoe Nolan
335
answered Jan 3 at 13:00
Joe NolanJoe Nolan
335
answered Jan 3 at 13:00
Joe NolanJoe Nolan
335
335
add a comment |
add a comment |
0
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> <-- this works
<br/><br/>
<input type="file" name="file" id="file" class="inputfile" />
<label for="file">
<button>Choose a file button label</button>
</label> <-- this doesn't workanswered Jan 3 at 7:45
SheedoSheedo
462410
add a comment |
0
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> <-- this works
<br/><br/>
<input type="file" name="file" id="file" class="inputfile" />
<label for="file">
<button>Choose a file button label</button>
</label> <-- this doesn't workanswered Jan 3 at 7:45
SheedoSheedo
462410
add a comment |
0
0
0
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> <-- this works
<br/><br/>
<input type="file" name="file" id="file" class="inputfile" />
<label for="file">
<button>Choose a file button label</button>
</label> <-- this doesn't workanswered Jan 3 at 7:45
SheedoSheedo
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> <-- this works
<br/><br/>
<input type="file" name="file" id="file" class="inputfile" />
<label for="file">
<button>Choose a file button label</button>
</label> <-- 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> <-- this works
<br/><br/>
<input type="file" name="file" id="file" class="inputfile" />
<label for="file">
<button>Choose a file button label</button>
</label> <-- 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> <-- this works
<br/><br/>
<input type="file" name="file" id="file" class="inputfile" />
<label for="file">
<button>Choose a file button label</button>
</label> <-- this doesn't workanswered Jan 3 at 7:45
SheedoSheedo
462410
answered Jan 3 at 7:45
SheedoSheedo
462410
answered Jan 3 at 7:45
SheedoSheedo
462410
answered Jan 3 at 7:45
SheedoSheedo
462410
462410
add a comment |
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');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
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
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
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