样式化input type="file"按钮

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

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

当前回答

这里有一个简单的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>

2013-03-02 21:46:12

其他回答

一个快速粗暴的方法是将标签设置为按钮，并将位置设置为绝对，这样它就会浮动在原始按钮上，你仍然可以看到文件名。不过，我正在考虑移动解决方案。

2017-05-29 18:13:34

可能会有很多牛角。但我喜欢在纯CSS中使用fa-buttons:

.divs { position: relative; display: inline-block; background-color: #fcc; } .inputs { position:absolute; left: 0px; height: 100%; width: 100%; opacity: 0; background: #00f; z-index:999; } .icons { position:relative; } <div class="divs"> <input type='file' id='image' class="inputs"> <i class="fa fa-image fa-2x icons"></i> </div> <div class="divs"> <input type='file' id='book' class="inputs"> <i class="fa fa-book fa-5x icons"></i> </div> <br><br><br> <div class="divs"> <input type='file' id='data' class="inputs"> <i class="fa fa-id-card fa-3x icons"></i> </div> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

小提琴:https://jsfiddle.net/zoutepopcorn/v2zkbpay/1/

2017-04-25 17:17:51

如果你正在寻找一个javascript库开箱即用的解决方案，jquery-fileinput工作得很好。

2013-11-25 21:15:41

不要被“伟大的”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找到按钮，并分配一个样式给它

你也可以看看这个记录

2009-02-21 10:41:05

样式化input type="file"按钮

推荐文章

最新文章

标签