Question

我正在尝试根据个人喜好设置文件上传按钮的样式，但如果没有JS，我找不到任何真正可行的方法。我确实找到了关于此主题的two other个问题，但其中的答案涉及JavaScript或建议Quirksmode's approach。

这个Quirksmode方法的主要问题是文件按钮仍然具有浏览器定义的尺寸，因此它不会自动调整为放置在它下面的按钮。我已经制作了一些基于它的代码，但它只会占用文件按钮通常占用的空间，所以它根本不会像我想要的那样填充父div。

HTML：

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

CSS：

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

This fiddle演示了这种方法是如何存在严重缺陷的。在Chrome中，单击第二个演示按钮下方的!!将打开文件对话框，但在所有其他浏览器中，文件按钮也不会占据按钮的正确区域。

有没有更坚实的方式来设置文件上传按钮的样式，没有任何JavaScript，并且最好使用尽可能少的'hacky'编码（因为黑客通常带来其他问题，例如小提琴中的那些）？

Answer 1

我发布这个是因为（令我惊讶的是）没有其他我能找到推荐的地方。

这是一种非常简单的方法，不会限制您使用浏览器定义的输入维度。只需在隐藏文件上传按钮周围使用<label>标记即可。与通过webkit's built-in styling ^[1]允许的样式相比，这样可以更加自由地进行样式设计。

标签标签的确切目的是将其上的任何点击事件指向子输入^[2]，因此使用它，您不会需要任何JavaScript来指导再点击事件到输入按钮。您可以使用以下内容：

＆＃13;

label.myLabel input[type="file"] {
    position:absolute;
    top: -1000px;
}

/***** Example custom styling *****/
.myLabel {
    border: 2px solid #AAA;
    border-radius: 4px;
    padding: 2px 5px;
    margin: 2px;
    background: #DDD;
    display: inline-block;
}
.myLabel:hover {
    background: #CCC;
}
.myLabel:active {
    background: #CCF;
}
.myLabel :invalid + span {
    color: #A44;
}
.myLabel :valid + span {
    color: #4A4;
}

＆＃13;

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

＆＃13;

我使用固定位置隐藏输入，使其即使在古老版本的Internet Explorer中也能正常工作（模拟IE8-拒绝在visibility:hidden或display:none文件上工作 - 输入）。我已经在模拟的IE7及更高版本中进行了测试，并且它运行良好。

遗憾的是，您无法在<button>标记内使用<label>，因此您必须自己定义按钮的样式。对我而言，这是这种方法的唯一缺点。
如果定义了for属性，则其值用于触发输入，id与for上的<label>属性相同。

Answer 2

请在下面找到适用于所有浏览器的方法。基本上我把输入放在图像的顶部。我使用font-size使其变得很大，因此用户总是单击上传按钮。

＆＃13;

.myFile {
  position: relative;
  overflow: hidden;
  float: left;
  clear: left;
}
.myFile input[type="file"] {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  opacity: 0;
  font-size: 100px;
  filter: alpha(opacity=0);
  cursor: pointer;
}

＆＃13;

<label class="myFile">
  <img src="http://wscont1.apps.microsoft.com/winstore/1x/c37a9d99-6698-4339-acf3-c01daa75fb65/Icon.13385.png" alt="" />
  <input type="file" />
</label>

＆＃13;

Answer 3

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

http://css-tricks.com/snippets/css/custom-file-input-styling-webkitblink/

.custom-file-input::-webkit-file-upload-button {
    visibility: hidden;
}

.custom-file-input::before {
    content: 'Select some files';
    display: inline-block;
    background: -webkit-linear-gradient(top, #f9f9f9, #e3e3e3);
    border: 1px solid #999;
    border-radius: 3px;
    padding: 5px 8px;
    outline: none;
    white-space: nowrap;
    -webkit-user-select: none;
    cursor: pointer;
    text-shadow: 1px 1px #fff;
    font-weight: 700;
    font-size: 10pt;
}

.custom-file-input:hover::before {
    border-color: black;
}

.custom-file-input:active::before {
    background: -webkit-linear-gradient(top, #e3e3e3, #f9f9f9);
}

<input type="file" class="custom-file-input">

Answer 4

这似乎很好地照顾了生意。 A fidde is here:

HTML

<label for="upload-file">A proper input label</label>

<div class="upload-button">

    <div class="upload-cover">
         Upload text or whatevers
    </div>

    <!-- this is later in the source so it'll be "on top" -->
    <input name="upload-file" type="file" />

</div> <!-- .upload-button -->

CSS

/* first things first - get your box-model straight*/
*, *:before, *:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

label {
    /* just positioning */
    float: left; 
    margin-bottom: .5em;
}

.upload-button {
    /* key */
    position: relative;
    overflow: hidden;

    /* just positioning */
    float: left; 
    clear: left;
}

.upload-cover { 
    /* basically just style this however you want - the overlaying file upload should spread out and fill whatever you turn this into */
    background-color: gray;
    text-align: center;
    padding: .5em 1em;
    border-radius: 2em;
    border: 5px solid rgba(0,0,0,.1);

    cursor: pointer;
}

.upload-button input[type="file"] {
    display: block;
    position: absolute;
    top: 0; left: 0;
    margin-left: -75px; /* gets that button with no-pointer-cursor off to the left and out of the way */
    width: 200%; /* over compensates for the above - I would use calc or sass math if not here*/
    height: 100%;
    opacity: .2; /* left this here so you could see. Make it 0 */
    cursor: pointer;
    border: 1px solid red;
}

.upload-button:hover .upload-cover {
    background-color: #f06;
}

Answer 5

覆盖所有文件输入的任何简单方法都是设置输入样式[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();
    });
});

这是我从http://cssdeck.com/labs/beautiful-flat-buttons获得的一些示例按钮CSS：

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;
}

Answer 6

我刚遇到这个问题，并为那些使用Angular的人编写了一个解决方案。您可以编写由容器，按钮和带有类型文件的输入元素组成的自定义指令。使用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
        })

      }

    };
  });

如果您使用的是玉石模板

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>

css

.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;
}

Answer 7

如果您正在使用Bootstrap和LESS，那么标签的样式也很容易：

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

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

用于文件上传按钮的跨浏览器自定义样式

7 个答案:

HTML

CSS