样式化input type="file"按钮

你如何风格输入类型=“文件”按钮?

<输入类型=“文件” />

当前回答

下面是一个解决方案，它还显示了所选的文件名: http://jsfiddle.net/raft9pg0/1/

HTML:

<label for="file-upload" class="custom-file-upload">Chose file</label>
<input id="file-upload" type="file"/>
File: <span id="file-upload-value">-</span>

JS:

$(function() {
    $("input:file[id=file-upload]").change(function() {
        $("#file-upload-value").html( $(this).val() );
    });
});

CSS:

input[type="file"] {
    display: none;
}

.custom-file-upload {
      background: #ddd;
      border: 1px solid #aaa;
      border-top: 1px solid #ccc;
      border-left: 1px solid #ccc;
      -moz-border-radius: 3px;
      -webkit-border-radius: 3px;
      border-radius: 3px;
      color: #444;
      display: inline-block;
      font-size: 11px;
      font-weight: bold;
      text-decoration: none;
      text-shadow: 0 1px rgba(255, 255, 255, .75);
      cursor: pointer;
      margin-bottom: 20px;
      line-height: normal;
      padding: 8px 10px; }

2014-10-15 12:15:17

其他回答

当<input type="file">被创建时，所有渲染引擎都会自动生成一个按钮。从历史上看，这个按钮是完全不可样式的。然而，Trident和WebKit通过伪元素添加了钩子。

三叉戟

从IE10开始，文件输入按钮可以使用::-ms-browse伪元素来设置样式。基本上，应用于普通按钮的任何CSS规则都可以应用于伪元素。例如:

:: -ms-browse { 背景:黑色; 颜色:红色; 填充:1 em; ｝ < input type = " file " >

Windows 8操作系统的IE10界面显示如下:

WebKit

WebKit为其文件输入按钮提供了一个带有::-webkit-file-upload-button伪元素的钩子。同样，几乎任何CSS规则都可以应用，因此Trident的例子也可以在这里工作:

:: -webkit-file-upload-button { 背景:黑色; 颜色:红色; 填充:1 em; ｝ < input type = " file " >

在OS X操作系统下，Chrome 26界面显示如下:

2013-05-01 07:37:26

这是简单的jquery。对Ryan的建议稍加修改后给出一个代码示例。

基本的html:

<div id="image_icon"></div>
<div id="filename"></div>
<input id="the_real_file_input" name="foobar" type="file">

当你准备好时，一定要在输入上设置样式:不透明度:0 你不能设置display: none，因为它需要是可点击的。但是你可以把它放在“new”按钮下面，或者如果你喜欢的话，把它塞进z-index的其他东西下面。

设置一些jquery，当你点击图像时，点击真正的输入。

$('#image_icon').click(function() {
    $('#the_real_file_input').click();
});

现在你的按钮开始工作了。更改时只需剪切并粘贴值。

$('input[type=file]').bind('change', function() {
    var str = "";
    str = $(this).val();
    $("#filename").text(str);
}).change();

发长音!您可能需要将val()解析为更有意义的内容，但您应该已经全部设置好了。

2011-12-04 00:38:33

不要被“伟大的”css解决方案所欺骗，这些解决方案实际上非常特定于浏览器，或者将样式化按钮覆盖在真正的按钮之上，或者强迫您使用<label>而不是<button>，或任何其他类似的hack。JavaScript是必要的，以使其工作为一般用途。如果你不相信我，请学习gmail和DropZone是怎么做的。

只要按你想要的样式设计一个普通的按钮，然后调用一个简单的JS函数来创建并链接一个隐藏的输入元素到你的样式按钮。

<!DOCTYPE html>
<meta charset="utf-8">

<style>
    button {
        width            : 160px;
        height           : 30px;
        font-size        : 13px;
        border           : none;
        text-align       : center;
        background-color : #444;
        color            : #6f0;
    }
    button:active {
        background-color : #779;
    }
</style>

<button id="upload">Styled upload button!</button>

<script>

function Upload_On_Click(id, handler) {
    var hidden_input = null;
    document.getElementById(id).onclick = function() {hidden_input.click();}
    function setup_hidden_input() {
        hidden_input && hidden_input.parentNode.removeChild(hidden_input);
        hidden_input = document.createElement("input");
        hidden_input.setAttribute("type", "file");
        hidden_input.style.visibility = "hidden";
        document.querySelector("body").appendChild(hidden_input);
        hidden_input.onchange = function() {
            handler(hidden_input.files[0]);
            setup_hidden_input();
        };
    }
    setup_hidden_input();
}

Upload_On_Click("upload", function(file) {
    console.log("GOT FILE: " + file.name);
});

</script>

注意上面的代码是如何在用户每次选择一个文件后重新链接它的。这很重要，因为只有当用户更改文件名时才会调用"onchange"。但您可能希望在用户每次提供该文件时获取该文件。

2017-09-09 06:34:38

如果有人仍然关心如何在没有JavaScript的情况下做到这一点，让我完成Josh的回答:

如何显示文件名的文本:

最简单的方法是将这两个元素设置到一个位置:相对，给标签一个更高的z-index，并给输入文件负边距，直到标签文本在你想要的位置。不要在输入时使用display:none !

例子:

input[type="file"] {
  position:relative;
  z-index:1;
  margin-left:-90px;
}

.custom-file-upload {
  border: 1px solid #ccc;
  display: inline-block;
  padding: 6px 12px;
  cursor: pointer;
  position:relative;
  z-index:2;
  background:white;

}

2015-10-05 16:20:38

这些答案很好，它们都适用于非常具体的用例。也就是说，他们固执己见。

所以，这里有一个答案，它没有任何假设，但无论你如何修改它都是有效的。你可以用css改变设计，添加javascript，可能会显示一个文件名的变化，等等，它仍然会一直工作。

代码:

这里是核心css

.file-input{
  pointer-events: none;
  position: relative;
  overflow: hidden;
}
.file-input > * {
  pointer-events: none;
}
.file-input > input[type="file"]{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0;
  pointer-events: all;
  cursor: pointer;
  height: 100%;
  width: 100%;
}

和核心html:

<div class="file-input">
  <input type="file"/>
</div>

如您所见，我们强制将.file-input元素或其任何子元素上发生的任何指针事件(单击)代理到文件输入。这是因为文件输入的位置是绝对的，并且总是占用容器的宽度/高度。因此，您可以根据自己的需要进行定制。样式包装成一个按钮，使用一些js显示文件名选择，等等，没有什么会打破，只要上述核心代码保持不变。

正如你将在演示中看到的，我已经添加了一个带有文本“Select file”的span和一个带有额外样式的类来设置.file-input div的样式。这应该是任何人想要创建自定义文件上传元素的规范起点。

演示：JSFIDDLE

2017-04-04 22:16:56

样式化input type="file"按钮

推荐文章

最新文章

标签