Styling an input type=“file” button

后端未结

关注

 30  1653

终归单人心

How do you style an input type=\"file\" button?

相关标签:

30条回答

囚心锁ツ

2020-11-21 12:03
```
 <label>
    <input type="file" />
 </label>
```
You can wrap your input type="file" inside of a label for the input. Style the label however you'd like and hide the input with display: none;
0 讨论(0)
发布评论:

提交评论
- 加载中...

一整个雨季

2020-11-21 12:03

Here we use a span to trigger input of type file and we simply customized that span, so we can add any styling using this way.

Note that we use input tag with visibility:hidden option and trigger it in the span.

.attachFileSpan{
color:#2b6dad;
cursor:pointer;
}
.attachFileSpan:hover{
text-decoration: underline;
}

<h3> Customized input of type file </h3>
<input id="myInput" type="file" style="visibility:hidden"/>

        <span title="attach file" class="attachFileSpan" onclick="document.getElementById('myInput').click()">
        Attach file
        </span>

Reference

0 讨论(0)

青春惊慌失措

2020-11-21 12:07
Styling file inputs are notoriously difficult, as most browsers will not change the appearance from either CSS or javascript.

Even the size of the input will not respond to the likes of:
```
<input type="file" style="width:200px">
```
Instead, you will need to use the size attribute:
```
<input type="file" size="60" />
```
For any styling more sophisticated than that (e.g. changing the look of the browse button) you will need to look at the tricksy approach of overlaying a styled button and input box on top of the native file input. The article already mentioned by rm at www.quirksmode.org/dom/inputfile.html is the best one I've seen.

UPDATE

Although it's difficult to style an <input> tag directly, this is easily possible with the help of a <label> tag. See answer below from @JoshCrozier: https://stackoverflow.com/a/25825731/10128619
0 讨论(0)
发布评论:

提交评论
- 加载中...
名媛妹妹

2020-11-21 12:07
Only this approach gives you the whole flexibility! ES6 / VanillaJS!

html:
```
<input type="file" style="display:none;"></input>
<button>Upload file</button>
```
javascript:
```
document.querySelector('button').addEventListener('click', () => {
  document.querySelector('input[type="file"]').click();
});
```
This hides the input-file button, but under the hood clicks it from another normal button, that you can obviously style like any other button. This is the only solution with no downside apart from a useless DOM-node. Thanks to display:none;, the input-button does not reserve any visible space in the DOM.

(I don't know anymore to whom to give props for this. But I got that idea from somewhere here on Stackoverflow.)
0 讨论(0)
发布评论:

提交评论
- 加载中...
天命终不由人

2020-11-21 12:08
I've found a very easy method to switch the file button to a picture. You just label a picture and place it on top of the file button.
```
<html>
<div id="File button">
    <div style="position:absolute;">
        
        <label for="fileButton"><img src="ImageURL"></label>
    </div>
    <div>
        <input type="file" id="fileButton"/>
    </div>
</div>
</html>
```
When clicking on the labeled image, you select the file button.
0 讨论(0)
发布评论:

提交评论
- 加载中...

星月不相逢

2020-11-21 12:10

Hide it with css and use a custom button with $(selector).click() to activate the the browse button. then set an interval to check the value of the file input type. the interval can display the value for the user so the user can see whats getting uploaded. the interval will clear when the form is submitted [EDIT] Sorry i have been very busy was meaning to update this post, here is an example

<form action="uploadScript.php" method="post" enctype="multipart/form-data">
<div>
    <!-- filename to display to the user -->
    <p id="file-name" class="margin-10 bold-10"></p>

    <!-- Hide this from the users view with css display:none; -->
    <input class="display-none" id="file-type" type="file" size="4" name="file"/>

    <!-- Style this button with type image or css whatever you wish -->
    <input id="browse-click" type="button" class="button" value="Browse for files"/>

    <!-- submit button -->
    <input type="submit" class="button" value="Change"/>
</div>

$(window).load(function () {
    var intervalFunc = function () {
        $('#file-name').html($('#file-type').val());
    };
    $('#browse-click').on('click', function () { // use .live() for older versions of jQuery
        $('#file-type').click();
        setInterval(intervalFunc, 1);
        return false;
    });
});

0 讨论(0)