这里有一个简单的css解决方案，它创建了一个一致的目标区域，并让你的伪造元素的风格，无论你喜欢。

基本思想是这样的:

有两个“假”元素(一个文本输入/链接)作为你的真实文件输入的兄弟。绝对放置它们，让它们完全在你的目标区域上方。 用div包装你的文件输入。将overflow设置为hidden(这样文件输入就不会溢出来)，并使它恰好是你想要的目标区域的大小。 在文件输入上设置不透明度为0，这样它就被隐藏了，但仍然可以点击。给它一个大的字体大小，这样你就可以点击目标区域的所有部分。

下面是jsfiddle: http://jsfiddle.net/gwwar/nFLKU/

<form>
    <input id="faux" type="text" placeholder="Upload a file from your computer" />
    <a href="#" id="browse">Browse </a>
    <div id="wrapper">
        <input id="input" size="100" type="file" />
    </div>
</form>

本地拖放支持的工作示例:https://jsfiddle.net/j40xvkb3/

当样式化文件输入时，您不应该破坏任何本机交互 输入提供。

display: none方法破坏了本地拖放支持。

为了不破坏任何东西，你应该对输入使用不透明度:0的方法，并在包装器中使用相对/绝对模式来定位它。

使用这种技术，你可以很容易地为用户设置点击/拖放区域的样式，并在dragenter事件上添加javascript自定义类来更新样式，并给用户一个反馈，让他看到他可以拖放文件。

HTML:

<label for="test">
  <div>Click or drop something here</div>
  <input type="file" id="test">
</label>

CSS:

input[type="file"] {
  position: absolute;
  left: 0;
  opacity: 0;
  top: 0;
  bottom: 0;
  width: 100%;
}

div {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ccc;
  border: 3px dotted #bebebe;
  border-radius: 10px;
}

label {
  display: inline-block;
  position: relative;
  height: 100px;
  width: 400px;
}

下面是一个工作示例(带有额外的JS来处理拖拽事件和删除的文件)。

https://jsfiddle.net/j40xvkb3/

希望这对你有所帮助!

我发现插件解决方案太笨重了，所以我制作了自己的jQuery插件Drolex FileStyle。

This plug-in allows you to style file input fields however you want. Actually, you style div elements to look like a tricked out file input, and the actual file input is automatically overlaid with 0% opacity. No additional HTML is required. Just include the css and js files in the page you want Drolex FileStyle and that's it! Edit the css file to your liking. Don't forget the jQuery library if your page doesn't already have it. If the client does not run JavaScript, then the file input will not be modified by js or css.

测试工作在Chrome 24, Firefox 18, Internet Explorer 9。 预计可以在之前的版本中使用。

下载:http://web.drolex.net/Drolex-FileStyle.zip。

这是一个纯CSS，无javascript，无bootstrap, 100%跨浏览器的解决方案!只需剪切粘贴一个样式块，然后测试您的文件上传控制。

这个解决方案不像其他文章那样试图隐藏然后重新创建原始HTML元素。它使用纯CSS，没有任何马戏团技巧或第三方工具，为所有主要浏览器设置原始文件上传表单控件的样式。你甚至不需要改变你的HTML代码!只需剪切并粘贴下面的代码到你的网页来测试它…

<style>
/* Note: This CSS will style all instances of 
   <input type=file /> controls in your website. */
input[type="file"],
input[type="file"]:visited,
input[type="file"]:hover,
input[type="file"]:focus,
input[type="file"]:active {
    margin:0;
    padding: 0em 0em;/* fallback: older browsers like IE 1-8 need "em" */
    padding: 0rem 0rem;/* older browsers dont know what "rem" is */
    overflow: hidden; /* long file names overflow so just hide the end */
    background: #fff;
    border-radius: .2em;
    border-radius: .2rem;
    outline: none;
    border: 2px solid #bbb;
    cursor: pointer;
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
}

input[type="file"]:hover {
    background: #f9f9ff; /* Optional rollover color: I am using a light blue to indicate an interaction */
    border: 2px solid #999;
}

input[type="file"]:visited,
input[type="file"]:focus,
input[type="file"]:active {
    background: #fff; /* Default back to white when focused. */
    border: 2px solid #999;
}

/* Note: These "disabled" selectors blow up in IE so have to be separated from the same styles above. */
input[type="file"]:disabled {
    margin: 0;
    padding: 0em 0em;
    padding: 0rem 0rem;
    overflow: hidden; /* long file names overflow so just hide the end */
    background: #ddd;
    border-radius: .2em;
    border-radius: .2rem;
    outline: none;
    border: 2px solid #bbb;
    cursor: pointer;
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
}

input[type="file"]:disabled:hover {
    background: #ddd; /* disabled-readonly buttons should be grey */
    border: 2px solid #999;
}

input[type="file"]:disabled:visited,
input[type="file"]:disabled:focus,
input[type="file"]:disabled:active {
    background: #ddd; /* disabled-readonly buttons should be grey */
    border: 2px solid #999;
}

/* IE UPLOAD BUTTON STYLE: This attempts to alter the file upload button style in IE.  Keep in mind IE gives you limited design control but at least you can customize its upload button.*/
::-ms-browse { /* IE */
    display: inline-block;
    margin: 0;
    padding: .2em .5em;
    padding: .2rem .5rem;
    text-align: center;
    outline: none;
    border: none;
    background: #fff;
    white-space: nowrap;
    cursor: pointer;
}
/* FIREFOX UPLOAD BUTTON STYLE */
::file-selector-button {/* firefox */
    display: inline-block;
    margin: 0rem 1rem 0rem 0rem;
    padding: .18em .5em;
    padding: .18rem .5rem;
    -webkit-appearance: button;
    text-align: center;
    border-radius: .1rem 0rem 0rem .1rem;
    outline: none;
    border: none;
    border-right: 2px solid #bbb;
    background: #eee;
    white-space: nowrap;
    cursor: pointer;
}
/* CHROME AND EDGE UPLOAD BUTTON STYLE */
::-webkit-file-upload-button { /* chrome and edge */
    display: inline-block;
    margin: 0rem 1rem 0rem 0rem;
    padding: .19em .5em;
    padding: .19rem .5rem;
    -webkit-appearance: button;
    text-align: center;
    border-radius: .1rem 0rem 0rem .1rem;
    outline: none;
    border: none;
    border-right: 2px solid #bbb;
    background: #eee;
    white-space: nowrap;
    cursor: pointer;
}
</style>

<input type="file" id="fileupload" name="fileupload" 
value="" tabindex="0" enctype="multipart/form-data" 
accept="image/*" autocomplete="off" multiple="multiple" 
aria-multiselectable="true" title="Multiple File Upload" 
aria-label="Multiple File Upload" />

<br /><br />

<input disabled="disabled" type="file" id="fileupload" 
name="fileupload" value="" tabindex="0" 
enctype="multipart/form-data" accept="image/*" 
autocomplete="off" multiple="multiple" 
aria-multiselectable="true" title="Disabled Multiple File Upload" 
aria-label="Disabled Multiple File Upload" />

这是文件上传控件在Firefox、Chrome和Edge中使用下面的CSS的样子。这是一个非常简单干净的设计。你可以把它变成你喜欢的样子:

Internet Explorer为您提供了有限的设计控制，但至少您可以使用CSS操作控件来更改一些东西，包括圆形边框和颜色:

我的解决方案的优点是:

You stick with simple CSS to style the original HTML input control You can see one or more file names in the file input textbox Screen readers and ARIA-friendly devices can interact normally with your file upload control You can set tabindex on your HTML element so its part of the tab order Because you are using plain HTML and CSS, your file input button works perfectly in old and new browsers ZERO JavaScript required! Runs and loads lighting fast in even the oldest of browsers Because your are not using "display:none" to hide the control, its file block stream data is never disabled from reaching the server in any old or new browser version known

你不需要愚蠢的JavaScript技巧，Bootstrap，或尝试隐藏/重新创建你的文件输入控件。这只会破坏所有在线用户的可用性。样式化原始HTML控件意味着你的文件上传控件在25年的新老浏览器中都能很好地工作。

This is why you cannot trust all these scripted hacks here that erase, rewrite, or destroy HTML just to try and recreate some visual experience. That shows that you do not understand how HTML is used or why its been around for 30 years practically unchanged. You should never try and rewrite HTML's native form control functionality. Why? There is more to using natural HTML in websites than just manipulation of markup for some forced visual experience. The trade-offs of limited visual design in these replaced HTML elements was designed that way for a reason.

我的建议是:坚持使用简单的HTML和CSS解决方案，作为web开发人员，你将没有任何问题。

<input type="file" name="media" style="display-none" onchange="document.media.submit()">

我通常会使用简单的javascript来定制文件输入标记。一个隐藏的输入字段，点击按钮，javascript调用隐藏字段，简单的解决方案与任何css或一堆jquery。

<button id="file" onclick="$('#file').click()">Upload File</button>

这里我们使用span来触发类型文件的输入，并且我们简单地定制了span，所以我们可以使用这种方式添加任何样式。

注意，我们使用带有可见性:hidden选项的input标记，并在span中触发它。

.attachFileSpan { 颜色:# 2 b6dad; 光标:指针; ｝ .attachFileSpan:{徘徊 文字修饰:下划线; ｝ <h3>自定义输入文件类型</h3> <input id="myInput" type="file" style="visibility:hidden"/> <span title="attach file" class="attachFileSpan" onclick="document.getElementById('myInput').click()" > 附加文件 < / span >

参考