关于html：设置输入类型=“文件”按钮的样式


Styling an input type=“file” button

如何设置输入type="file"按钮的样式？

相关讨论

你不需要JavaScript！这是一个跨浏览器的解决方案：

看这个例子！ - 适用于Chrome / FF / IE - (IE10 / 9/8/7)

最好的方法是使自定义标签元素的for属性附加到隐藏文件输入元素。 (标签的for属性必须与文件元素的id匹配才能使其正常工作)。

1
2
3
4
<label for="file-upload" class="custom-file-upload">
    Custom Upload
</label>
<input id="file-upload" type="file"/>

作为替代方案，您也可以直接使用标签包装文件输入元素:(示例)

1
2
3
4
<label class="custom-file-upload">
    <input type="file"/>
    Custom Upload
</label>

在样式方面，只需使用属性选择器隐藏输入元素。

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

然后，您需要做的就是设置自定义label元素的样式。 (例)。

1
2
3
4
5
6
.custom-file-upload {
    border: 1px solid #ccc;
    display: inline-block;
    padding: 6px 12px;
    cursor: pointer;
}

1 - 值得注意的是，如果使用display: none隐藏元素，它将无法在IE8及以下版本中使用。还要注意jQuery validate默认情况下不验证隐藏字段的事实。如果这些事情中的任何一个对您来说都是一个问题，这里有两种不同的方法可以隐藏在这些情况下工作的输入(1,2)。

相关讨论

造型文件输入非常困难，因为大多数浏览器不会改变CSS或javascript的外观。

即使输入的大小也不会响应：

1
<input type="file" style="width:200px">

相反，您需要使用size属性：

1
<input type="file" size="60" />

对于任何比这更复杂的样式(例如，更改浏览按钮的外观)，您将需要查看在原生文件输入顶部覆盖样式按钮和输入框的棘手方法。 rm在www.quirksmode.org/dom/inputfile.html上已经提到过的文章是我见过的最好的文章。

相关讨论

按照这些步骤，您可以为文件上载表单创建自定义样式：

  • 这是简单的HTML表单(请阅读我在下面写的HTML评论)

    1
    2
    3
    4
    5
    6
    7
    <form action="#type your action here" method="POST" enctype="multipart/form-data">
      Click to upload!
      <!-- this is your file input tag, so i hide it!-->
      <input id="upfile" type="file" value="upload"/>
      <!-- here you can have file submit button or you can write a simple script to upload the file automatically-->
      <input type="submit" value='submit' >
    </form>

  • 然后使用这个简单的脚本将click事件传递给文件输入标记。

    1
    2
    3
    function getFile(){
         document.getElementById("upfile").click();
    }

    现在，您可以使用任何类型的样式，而无需担心如何更改默认样式。

    • 我非常了解这一点，因为我一直试图将默认样式更改为一个半月。相信我，这很难，因为不同的浏览器有不同的上传输入标签。所以使用这个来构建自定义文件上载表单。这是完整的AUTOMATED UPLOAD代码。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    function getFile() {
      document.getElementById("upfile").click();
    }

    function sub(obj) {
      var file = obj.value;
      var fileName = file.split("\");
      document.getElementById("yourBtn").innerHTML = fileName[fileName.length - 1];
      document.myForm.submit();
      event.preventDefault();
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    #yourBtn {
      position: relative;
      top: 150px;
      font-family: calibri;
      width: 150px;
      padding: 10px;
      -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
      border: 1px dashed #BBB;
      text-align: center;
      background-color: #DDD;
      cursor: pointer;
    }
    1
    2
    3
    4
    5
    6
    7
    8
    <form action="#type your action here" method="POST" enctype="multipart/form-data" name="myForm">
      click to upload a file
      <!-- this is your file input tag, so i hide it!-->
      <!-- i used the onchange event to fire the form submission-->
      <input id="upfile" type="file" value="upload" onchange="sub(this)" />
      <!-- here you can have file submit button or you can write a simple script to upload the file automatically-->
      <!-- <input type="submit" value='submit' > -->
    </form>

    相关讨论

    使用css隐藏它并使用带有$(selector).click()的自定义按钮来激活浏览按钮。然后设置一个间隔来检查文件输入类型的值。间隔可以显示用户的值，以便用户可以看到上传的内容。提交表单时间隔会清除[编辑]抱歉我一直很忙意思是更新这篇文章，这里有一个例子

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    <form action="uploadScript.php" method="post" enctype="multipart/form-data">

        <!-- filename to display to the user -->
        <p id="file-name" class="margin-10 bold-10">
    </p>

        <!-- Hide this from the users view with css display:none; -->
        <input class="display-none" id="file-type" type="file" size="4" name="file"/>

        <!-- Style this button with type image or css whatever you wish -->
        <input id="browse-click" type="button" class="button" value="Browse for files"/>

        <!-- submit button -->
        <input type="submit" class="button" value="Change"/>

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    $(window).load(function () {
        var intervalFunc = function () {
            $('#file-name').html($('#file-type').val());
        };
        $('#browse-click').on('click', function () { // use .live() for older versions of jQuery
            $('#file-type').click();
            setInterval(intervalFunc, 1);
            return false;
        });
    });
    相关讨论

    HTML

    1
    2
    SelectPicture
    <input id="html_btn" type='file'" />

    CSS

    1
    2
    3
    4
    5
    6
    7
    .new_Btn {
    // your css propterties
    }

    #html_btn {
     display:none;
    }

    jQuery的

    1
    2
    3
    4
    $('.new_Btn').bind("click" , function () {
            $('#html_btn').click();
        });
    //edit: 6/20/2014: Be sure to use".on" not".bind" for newer versions of jQuery

    小提琴：http：//jsfiddle.net/M7BXC/

    你可以在没有普通JavaScript的jQuery的情况下实现你的目标。

    现在newBtn与html_btn链接，你可以像你想要的那样为你的新btn设置样式：D

    相关讨论

    创建时，所有渲染引擎都会自动生成一个按钮。从历史上看，该按钮完全不具有风格。但是，Trident和WebKit通过伪元素添加了钩子。

    三叉戟

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

    1
    2
    3
    4
    5
    ::-ms-browse {
      background: black;
      color: red;
      padding: 1em;
    }
    1
    <input type="file">

    在Windows 8上的IE10中显示如下：

    This displays as follows in IE10 on Windows 8:

    WebKit的

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

    1
    2
    3
    4
    5
    ::-webkit-file-upload-button {
      background: black;
      color: red;
      padding: 1em;
    }
    1
    <input type="file">

    这在OS X上的Chrome 26中显示如下：

    This displays as follows in Chrome 26 on OS X:

    相关讨论

    如果您使用的是Bootstrap 3，这对我有用：

    见http://www.abeautifulsite.net/whipping-file-inputs-into-shape-with-bootstrap-3/

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    .btn-file {
      position: relative;
      overflow: hidden;
    }
    .btn-file input[type=file] {
      position: absolute;
      top: 0;
      right: 0;
      min-width: 100%;
      min-height: 100%;
      font-size: 100px;
      text-align: right;
      filter: alpha(opacity=0);
      opacity: 0;
      outline: none;
      background: white;
      cursor: inherit;
      display: block;
    }
    1
    2
    3
    4
    5
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

    <span class="btn btn-primary btn-file">
        Browse...<input type="file">
    </span>

    其中产生以下文件输入按钮：

    Example button

    说真的，请查看http://www.abeautifulsite.net/whipping-file-inputs-into-shape-with-bootstrap-3/

    我可以使用下面的代码用纯CSS做到这一点。我使用过bootstrap和font-awesome。

    1
    2
    3
    4
    5
    6
    7
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />

    <label class="btn btn-default btn-sm center-block btn-file">
      <i class="fa fa-upload fa-2x" aria-hidden="true">
      <input type="file" style="display: none;">
    </label>

    1
    2
    3
     <label>
        <input type="file" />
     </label>

    您可以将输入类型="文件"包装在输入的标签内。根据您的喜好设置标签样式，并使用display：none隐藏输入;

    相关讨论

    这里的工作示例使用本机拖放支持：https：//jsfiddle.net/j40xvkb3/

    在设置文件输入样式时，不应该破坏任何本机交互
    输入提供。

    display: none方法打破了本机拖放支持。

    要不破坏任何内容，您应该使用opacity: 0方法进行输入，并使用包装中的相对/绝对模式对其进行定位。

    使用此技术，您可以轻松地为用户设置单击/拖放区域的样式，并在dragenter事件的javascript中添加自定义类以更新样式并向用户提供反馈以让他看到他可以删除文件。

    HTML：

    1
    2
    3
    4
    <label for="test">
      Click or drop something here
      <input type="file" id="test">
    </label>

    CSS：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    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来处理dragover事件和删除文件)。

    https://jsfiddle.net/j40xvkb3/

    希望这有帮助！

    相关讨论

    使用jquery很简单。通过略微修改给出Ryan建议的代码示例。

    基本的HTML：

    1
    <input id="the_real_file_input" name="foobar" type="file">

    准备就绪时，请务必在输入上设置样式：opacity: 0
    您无法设置display: none，因为它需要是可点击的。但是如果你愿意的话，你可以将它放在"新"按钮下面，或者用z-index收集其他东西。

    单击图像时，设置一些jquery以单击实际输入。

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

    现在你的按钮正常工作。只需在更改时剪切并粘贴值即可。

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

    哇哇！您可能需要将val()解析为更有意义的内容，但您应该全部设置。

    相关讨论

    这是一个解决方案，它不会真正设置元素的样式，而是在其他元素(可以设置样式)之上使用元素。 元素实际上并不可见，因此整体错觉是一个风格很好的文件上传控件。

    我最近遇到了这个问题，尽管Stack Overflow上有很多答案，但似乎没有一个真的符合这个要求。最后，我最终定制了这个，以便有一个简单而优雅的解决方案。

    我也在Firefox，IE(11,10和9)，Chrome和Opera，iPad以及一些Android设备上进行了测试。

    这是JSFiddle链接 - > http://jsfiddle.net/umhva747/

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    $('input[type=file]').change(function(e) {
        $in = $(this);
        $in.next().html($in.val());
       
    });

    $('.uploadButton').click(function() {
        var fileName = $("#fileUpload").val();
        if (fileName) {
            alert(fileName +" can be uploaded.");
        }
        else {
            alert("Please select a file to upload");
        }
    });
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    body {
        background-color:Black;
    }

    div.upload {
        background-color:#fff;
        border: 1px solid #ddd;
        border-radius:5px;
        display:inline-block;
        height: 30px;
        padding:3px 40px 3px 3px;
        position:relative;
        width: auto;
    }

    div.upload:hover {
        opacity:0.95;
    }

    div.upload input[type="file"] {
        display: input-block;
        width: 100%;
        height: 30px;
        opacity: 0;
        cursor:pointer;
        position:absolute;
        left:0;
    }
    .uploadButton {
        background-color: #425F9C;
        border: none;
        border-radius: 3px;
        color: #FFF;
        cursor:pointer;
        display: inline-block;
        height: 30px;
        margin-right:15px;
        width: auto;
        padding:0 20px;
        box-sizing: content-box;
    }

    .fileName {
        font-family: Arial;
        font-size:14px;
    }

    .upload + .uploadButton {
        height:38px;
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
    <form action="" method="post" enctype="multipart/form-data">
       
            <input type="button" class="uploadButton" value="Browse" />
            <input type="file" name="upload" accept="image/*" id="fileUpload" />
            <span class="fileName">Select file..</span>
       
        <input type="button" class="uploadButton" value="Upload File" />
    </form>

    希望这可以帮助！！！

    相关讨论

    可见性：隐藏的TRICK

    我通常会选择visibility:hidden技巧

    这是我的风格按钮

    1
    Upload

    这是input type = file按钮。请注意visibility:hidden规则

    1
    <input type="file" id="upload" style="visibility:hidden;">

    这是将它们粘合在一起的JavaScript位。有用

    1
    2
    3
     $('#uploadbutton').click(function(){
        $('input[type=file]').click();
     });
    相关讨论

    我能想到的唯一方法是在渲染后使用javascript找到按钮并为其指定样式

    你也可以看一下这篇文章

    相关讨论

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

    我通常会使用简单的javascript来自定义文件输入标签。一个隐藏的输入字段，点击按钮，javascript调用隐藏字段，简单的解决方案，没有任何CSS或一堆jquery。

    1
    <button id="file" onclick="$('#file').click()">Upload File</button>
    相关讨论

    将上传文件按钮放在漂亮的按钮或元素上并隐藏它。

    非常简单，适用于任何浏览器

    1
    2
        <button type="button" class="nice-button">upload_file</button>
        <input type="file" name="file" class="upload-btn">

    样式

    1
    2
    3
    4
    5
    6
    7
    8
    9
    .upload-wrap {
        position: relative;
    }

    .upload-btn {
        position: absolute;
        left: 0;
        opacity: 0;
    }

    这里我们使用span来触发类型文件的输入，我们只是自定义了这个范围，因此我们可以使用这种方式添加任何样式。

    请注意，我们使用带有visibility：hidden选项的输入标记并在span中触发它。

    1
    2
    3
    4
    5
    6
    7
    .attachFileSpan{
    color:#2b6dad;
    cursor:pointer;
    }
    .attachFileSpan:hover{
    text-decoration: underline;
    }
    1
    2
    3
    4
    5
    6
     Customized input of type file
    <input id="myInput" type="file" style="visibility:hidden"/>

            <span title="attach file" class="attachFileSpan" onclick="document.getElementById('myInput').click()">
            Attach file
            </span>

    参考

    也许是很多人。但我喜欢这个带有fa-buttons的纯CSS：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    .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;
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    <input type='file' id='image' class="inputs">
    <i class="fa fa-image fa-2x icons">



    <input type='file' id='book' class="inputs">
    <i class="fa fa-book fa-5x icons">



    <input type='file' id='data' class="inputs">
    <i class="fa fa-id-card fa-3x icons">






    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

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

    只有CSS

    使用这非常简单易用

    HTML：

    1
    2
    <label>Attach your screenshort</label>
                    <input type="file" multiple class="choose">

    CSS：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    .choose::-webkit-file-upload-button {
        color: white;
        display: inline-block;
        background: #1CB6E0;
        border: none;
        padding: 7px 15px;
        font-weight: 700;
        border-radius: 3px;
        white-space: nowrap;
        cursor: pointer;
        font-size: 10pt;
    }
    相关讨论

    使用材质/角度文件上传这是一种很好的方法。
    您可以使用引导按钮执行相同操作。

    注意我使用而不是