Html 文件上载按钮的跨浏览器自定义样式

我正在尝试根据我的个人喜好设计一个文件上传按钮，但是如果没有JS，我找不到任何真正可靠的方法来实现这一点。我确实发现了关于这个主题的问题，但答案要么涉及JavaScript，要么是建议

这种怪癖模式方法的主要问题是，“文件”按钮仍然具有浏览器定义的尺寸，因此它不会自动调整以适应放置在其下方的按钮。我已经基于它编写了一些代码，但是它只会占用文件按钮通常占用的空间，所以它根本不会像我希望的那样填充父div

HTML:

<div class="myLabel">
    <input type="file"/>
    <span>My Label</span>
</div>

.myLabel {
    position: relative;
}
.myLabel input {
    position: absolute;
    z-index: 2;
    opacity: 0;
    width: 100%;
    height: 100%;
}

说明了这种方法是如何存在缺陷的。在Chrome中，单击

无论如何都会打开文件对话框，但在所有其他浏览器中，文件按钮不会占据按钮的正确区域

有没有更可靠的方法来设计文件上传按钮的样式，而不使用任何JavaScript，最好使用尽可能少的“黑客”编码（因为黑客攻击通常会带来其他问题，比如小提琴中的问题）？
我之所以发布这篇文章，是因为（让我惊讶的是）我找不到其他地方推荐这个

有一种非常简单的方法可以做到这一点，而不限制您使用浏览器定义的输入维度。只需在隐藏的文件上载按钮周围使用
标记即可。这比[1]中允许的样式设置更自由

label标记的确切用途是将其上的任何单击事件定向到子输入[2]，因此使用它，您不再需要任何JavaScript将单击事件定向到输入按钮。您需要使用类似以下的内容：


label.myLabel输入[type=“file”]{
位置：绝对位置；
顶部：-1000px；
}
/*****自定义样式示例*****/
迈拉贝尔先生{
边框：2倍实心#AAA；
边界半径：4px；
填充物：2px 5px；
保证金：2倍；
背景：DDD；
显示：内联块；
}
.myLabel:悬停{
背景：#CCC；
}
.myLabel:活动{
背景：#共因失效；
}
.myLabel:无效的+span{
颜色：#A44；
}
.myLabel:有效+span{
颜色：#4A4；
}

我的标签
这似乎很好地解决了业务问题

HTML
最好的例子就是这个，没有隐藏，没有jQuery，它完全是纯CSS



。自定义文件输入：：-webkit文件上载按钮{
可见性：隐藏；
}
.custom文件输入：：之前{
内容：“选择一些文件”；
显示：内联块；
背景：-webkit线性梯度（顶部，#f9f9f9，#E3）；
边框：1px实心#999；
边界半径：3px；
填充：5px 8px；
大纲：无；
空白：nowrap；
-webkit用户选择：无；
光标：指针；
文本阴影：1px 1px#fff；
字号：700；
字号：10pt；
}
.custom文件输入：hover:：before{
边框颜色：黑色；
}
.custom文件输入：active:：before{
背景：-webkit线性梯度（顶部，#e3e3，#f9f9f9）；
}
请在下面找到一种适用于所有浏览器的方法。基本上我把输入放在图像的顶部。
我使用字体大小使它变大，因此用户总是单击上载按钮


.myFile{
位置：相对位置；
溢出：隐藏；
浮动：左；
清除：左；
}
.myFile输入[type=“file”]{
显示：块；
位置：绝对位置；
排名：0；
右：0；
不透明度：0；
字体大小：100px；
过滤器：alpha（不透明度=0）；
光标：指针；
}
我刚刚遇到了这个问题，并为使用Angular的用户编写了一个解决方案。您可以编写由容器、按钮和类型为file的输入元素组成的自定义指令。使用CSS，然后将输入放置在自定义按钮上，但不透明度为0。将容器的高度和宽度设置为按钮的偏移宽度和高度，将输入的高度和宽度设置为容器的100%

指令

angular.module('myCoolApp')
  .directive('fileButton', function () {
    return {
      templateUrl: 'components/directives/fileButton/fileButton.html',
      restrict: 'E',
      link: function (scope, element, attributes) {

        var container = angular.element('.file-upload-container');
        var button = angular.element('.file-upload-button');

        container.css({
            position: 'relative',
            overflow: 'hidden',
            width: button.offsetWidth,
            height: button.offsetHeight
        })

      }

    };
  });

如果您使用的是jade，则为jade模板

div(class="file-upload-container") 
    button(class="file-upload-button") +
    input#file-upload(class="file-upload-input", type='file', onchange="doSomethingWhenFileIsSelected()")  

如果您使用的是html，则使用相同的html模板

<div class="file-upload-container">
   <button class="file-upload-button"></button>
   <input class="file-upload-input" id="file-upload" type="file" onchange="doSomethingWhenFileIsSelected()" /> 
</div>

覆盖所有文件输入的简单方法是，只需设置输入[type=button]的样式，并将其全局插入，即可将文件输入转换为按钮：

$(document).ready(function() {
    $("input[type=file]").each(function () {
        var thisInput$ = $(this);
        var newElement = $("<input type='button' value='Choose File' />");
        newElement.click(function() {
            thisInput$.click();
        });
        thisInput$.after(newElement);
        thisInput$.hide();
    });
});

如果您使用的是Bootstrap和LESS，则标签样式也很容易：

label {
    .btn();
    .btn-primary();

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

在这里，我把它弄得更糟了：很好的解决方案。这不是一个紧凑的解决方案，但仍然非常好。不过，只有一条小小的评论：对于旧版IE，你应该包括一个
过滤器
不透明性（在这个版本中，它看起来并没有那么好，但话说回来，它是IE）。除此之外，这是一个非常好的选择。很好的观点。在我的项目中，我不再支持IE8或更低版本。但是，对于某些客户的事情，很高兴知道。毕竟，
标签
解决方案似乎更好。我使用的是
display:none然后使用一些单选按钮制作标签
内联块
或
块
。看起来非常棒-我的解决方案不是超小的，但是-实际上-你会有多少上传按钮等等。。。我想你可以在用户重置中有一个2和一些条件的组合，并覆盖你的所有基础。@regisbsb-它在Atari上也不起作用-或者是的，这就是我所说的“你必须自己定义按钮的样式”。您只需将一些样式添加到
标记中，使其看起来像一个按钮。这太棒了。至于
标签
元素中的按钮，它非常好。它们可以包含任何短语内容（包括
输入
和
按钮
），只要没有其他标签或是另一个标签。资料来源：@regisbsb我刚刚又在IE7和IE8中测试了一次，事实上IE7似乎已经不起作用了（再也不起作用了？），但IE8工作得很好。什么代码不适合你？注：在撰写本文时，IE7是由使用的，所以我不会这么做
.file-upload-button {
    margin-top: 40px;
    padding: 30px;
    border: 1px solid black;
    height: 100px;
    width: 100px;
    background: transparent;
    font-size: 66px;
    padding-top: 0px;
    border-radius: 5px;
    border: 2px solid rgb(255, 228, 0); 
    color: rgb(255, 228, 0);
}

.file-upload-input {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

$(document).ready(function() {
    $("input[type=file]").each(function () {
        var thisInput$ = $(this);
        var newElement = $("<input type='button' value='Choose File' />");
        newElement.click(function() {
            thisInput$.click();
        });
        thisInput$.after(newElement);
        thisInput$.hide();
    });
});

input[type=button] {
  position: relative;
  vertical-align: top;
  width: 100%;
  height: 60px;
  padding: 0;
  font-size: 22px;
  color:white;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  background: #454545;
  border: 0;
  border-bottom: 2px solid #2f2e2e;
  cursor: pointer;
  -webkit-box-shadow: inset 0 -2px #2f2e2e;
  box-shadow: inset 0 -2px #2f2e2e;
}
input[type=button]:active {
  top: 1px;
  outline: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

label {
    .btn();
    .btn-primary();

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