首页 文章

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

提问于
浏览 次
562

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

html css file-io

30 回答

  • 785

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

    即使输入的大小也不会响应以下内容：

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

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

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

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

    回复于
  • 1

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

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

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

    <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/

    回复于
  • 11

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

    See this example! - 适用于Chrome / FF / IE - （IE10 / 9/8/7）

    最好的方法是将 for 属性附加到 hidden 文件输入元素的自定义标签元素 . （标签的 for 属性必须与文件元素的 id 匹配才能生效） .

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

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

    <label class="custom-file-upload">
    <input type="file"/>
    Custom Upload
</label>

    在样式方面，只需使用attribute selector隐藏输入元素 .

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

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

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

    1 - 值得注意的是，如果使用 display: none 隐藏元素，它将无法在IE8及以下版本中使用 . 还要注意jQuery默认验证doesn't validate hidden fields的事实 . 如果这些事情中的任何一个对您来说都是一个问题，这里有两种不同的方法来隐藏在这些情况下有效的输入（1，2） .

    回复于
  • 1

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

    1.）这是简单的html表格（请阅读我在下面写的html评论）

    <form action="#type your action here" method="POST" enctype="multipart/form-data">
  <div id="yourBtn" style="height: 50px; width: 100px;border: 1px dashed #BBB; cursor:pointer;" onclick="getFile()">Click to upload!</div>
  <!-- this is your file input tag, so i hide it!-->
  <div style='height: 0px;width:0px; overflow:hidden;'><input id="upfile" type="file" value="upload"/></div>
  <!-- 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>

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

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

    现在，您可以使用任何类型的样式，而无需担心如何更改默认样式 . 我非常了解这一点，因为我一直试图改变一个半月的默认样式 . 相信我这很难，因为不同的浏览器有不同的上传输入标签 . 所以使用这个来构建自定义文件上传表单 . 这是完整的AUTOMATED UPLOAD代码 .

    <html>
<head>
<style>
#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;
  }
</style>
<script type="text/javascript">
 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();
  }
</script>
</head>
<body>
<center>
<form action="#type your action here" method="POST" enctype="multipart/form-data" name="myForm">
<div id="yourBtn" onclick="getFile()">click to upload a file</div>
<!-- this is your file input tag, so i hide it!-->
<!-- i used the onchange event to fire the form submission-->
<div style='height: 0px;width: 0px; overflow:hidden;'><input id="upfile" type="file" value="upload" onchange="sub(this)"/></div>
<!-- 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>
</center>
</body>
</html>

    请享用！

    祝你今天愉快，

    回复于
  • 1

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

    <form action="uploadScript.php" method="post" enctype="multipart/form-data">
<div>
    <!-- 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"/>
</div>

    $(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;
    });
});
    回复于
  • 48

    HTML

    <div class="new_Btn">SelectPicture</div><br>
<input id="html_btn" type='file'" /><br>

    CSS

    .new_Btn {
// your css propterties
}

#html_btn {
 display:none;
}

    jQuery

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

    Fiddle ：http://jsfiddle.net/M7BXC/

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

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

    回复于
  • 1

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

    Trident

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

    ::-ms-browse {
  background: black;
  color: red;
  padding: 1em;
}

    <input type="file">

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

    This displays as follows in IE10 on Windows 8:

    WebKit

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

    ::-webkit-file-upload-button {
  background: black;
  color: red;
  padding: 1em;
}

    <input type="file">

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

    This displays as follows in Chrome 26 on OS X:

    回复于
  • 11
    <label>
    <input type="file" />
 </label>

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

    回复于
  • 1

    我可以使用 pure CSS 使用下面的代码 . 我用过bootstrap和font-awesome .

    <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"></i>
  <input type="file" style="display: none;">
</label>
    回复于
  • 4

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

    基本的HTML：

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

    准备好后，请务必在输入上设置样式： opacity: 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（）解析为更有意义的内容，但您应该全部设置 .

    回复于
  • 175

    这里的工作示例本机拖放支持：https：//jsfiddle.net/ms3bbazv/4/

    样式化文件输入时， you shouldn't break any of native interaction the input provides .

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

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

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

    HTML：

    <label for="test">
  <div>Click or drop something here</div>
  <input type="file" id="test">
</label>

    CSS：

    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/ms3bbazv/4/

    希望这有帮助！

    回复于
  • 56

    这是一个解决方案，它没有真正设置 <input type="file" /> 元素的样式，而是在其他元素（可以设置样式）之上使用 <input type="file" /> 元素 . <input type="file" /> 元素实际上并不可见，因此整体错觉是一个风格很好的文件上传控件 .

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

    我还在Firefox，IE（11,10和9），Chrome和Opera，iPad以及一些Android设备上测试了这个 .

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

    $('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");
    }
});

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

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form action="" method="post" enctype="multipart/form-data">
    <div class="upload">
        <input type="button" class="uploadButton" value="Browse" />
        <input type="file" name="upload" accept="image/*" id="fileUpload" />
        <span class="fileName">Select file..</span>
    </div>
    <input type="button" class="uploadButton" value="Upload File" />
</form>

    希望这可以帮助！！！

    回复于
  • 7

    可见性：隐藏TRICK

    我通常会选择 visibility:hidden 技巧

    这是我的风格按钮

    <div id="uploadbutton" class="btn btn-success btn-block">Upload</div>

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

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

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

    <script>
 $('#uploadbutton').click(function(){
    $('input[type=file]').click();
 });
 </script>
    回复于
  • 19

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

    你也可以看this writeup

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

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

    <button id="file" onclick="$('#file').click()">Upload File</button>
    回复于
  • 3

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

    .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/

    回复于
  • 2

    这是一个解决方案，它还显示了所选的文件名：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; }
    回复于
  • 8

    本周我还需要自定义按钮并显示所选的文件名，所以在阅读了上面的一些答案后（感谢BTW）我想出了以下实现：

    HTML：

    <div class="browse">
<label id="uploadBtn" class="custom-file-upload">Choose file
<input type="file" name="fileInput" id="fileInput" accept=".yaml" ngf-select ngf-change="onFileSelect($files)" />
</label>
<span>{{fileName}}</span>
</div>

    CSS

    input[type='file'] {
    color: #a1bbd5;
    display: none;

}

.custom-file-upload {
    border: 1px solid #a1bbd5;
    display: inline-block;
    padding: 2px 8px;
    cursor: pointer;
}

label{
    color: #a1bbd5;
    border-radius: 3px;
}

    Javascript（Angular）

    app.controller('MainCtrl', function($scope) {

        $scope.fileName = 'No file chosen';

          $scope.onFileSelect = function ($files) {
          $scope.selectedFile = $files;
          $scope.fileName = $files[0].name;
    };
});

    基本上我正在使用ng-file-upload lib，Angular-wise我将文件名绑定到我的$ scope并给它初始值'No file chosen'，我也将onFileSelect（）函数绑定到我的范围，所以当一个文件被选中时，我使用ng-upload API获取文件名并将其分配给$ scope.filename .

    回复于
  • 3

    ONLY CSS

    使用这个 simple 和 EASY

    HTML：

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

    CSS：

    .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;
}
    回复于
  • 7

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

    注意我使用 <a> 而不是 <button> 这允许点击事件冒泡 .

    <label>
    <input type="file" (change)="setFile($event)" style="display:none" />

    <a mat-raised-button color="primary">
      <mat-icon>file_upload</mat-icon>
      Upload Document
    </a>

  </label>
    回复于
  • 171

    这里我们使用span来触发类型文件和 we simply customized that span 的输入，因此我们可以使用这种方式添加任何样式 .

    Note 我们使用带可见性的输入标签：隐藏选项并在 Span 中触发它 .

    .attachFileSpan{
color:#2b6dad;
cursor:pointer;
}
.attachFileSpan:hover{
text-decoration: underline;
}

    <h3> Customized input of type file </h3>
<input id="myInput" type="file" style="visibility:hidden"/>

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

    Reference

    回复于
  • 19

    css可以在这里做很多...带一点诡计......

    <div id='wrapper'>
  <input type='file' id='browse'>
</div>

#wrapper {
     width: 93px; /*play with this value */
     height: 28px; /*play with this value */
     background: url('browseBtn.png') 0 0 no-repeat;
     border:none;
     overflow:hidden;
}

#browse{
     margin-left:-145px; /*play with this value */
     opacity:0; /* set to .5 or something so you can better position it as an overlay then back to zero again after you're done */
     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
     filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
}

    ::参考:: http://site-o-matic.net/?viewpost=19

    -abbey

    回复于
  • 3

    我找到了一种将文件按钮切换到图片的简单方法 . 您只需标记图片并将其放在文件按钮的顶部即可 .

    <html>
<div id="File button">
    <div style="position:absolute;">
        <!--This is your labeled image-->
        <label for="fileButton"><img src="ImageURL"></label>
    </div>
    <div>
        <input type="file" id="fileButton"/>
    </div>
</div>
</html>

    单击带标签的图像时，选择文件按钮 .

    回复于
  • 3

    不要被"great"仅限CSS的解决方案所愚弄，这些解决方案实际上是特定于浏览器的，或者将样式按钮覆盖在真实按钮的顶部，或者强制您使用 <label> 而不是 <button> ，或任何其他此类黑客攻击 . 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” . 但是，您可能希望每次用户提供该文件时都获取该文件 .

    回复于
  • 2

    这是一个简单的css解决方案，它可以创建一致的目标区域，并让您根据自己的喜好设计人造元素 .

    基本的想法是这样的：

    • 有两个"fake"元素（文本输入/链接）作为真实文件输入的兄弟 . 绝对定位它们，使它们完全位于目标区域的顶部 .

    • 用div包装文件输入 . 将溢出设置为隐藏（因此文件输入不会溢出），并使其完全相同您希望目标区域的大小 .

    • 在文件输入上将不透明度设置为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>
    回复于
  • 20

    使用jQuery的一个非常聪明的解决方案适用于所有旧浏览器以及新浏览器，我发现here . 它使用实际的文件浏览按钮来处理所有样式和click（）问题 . 我做了一个简单的javascript版本：fiddle解决方案就像天才一样简单：使文件输入不可见，并使用一段代码将它放在鼠标光标下 .

    <div class="inp_field_12" onmousemove="file_ho(event,this,1)"><span>browse</span>
<input id="file_1" name="file_1" type="file" value="" onchange="file_ch(1)">
</div>
<div id="result_1" class="result"></div>


function file_ho(e, o, a) {
    e = window.event || e;
    var x = 0,
    y = 0;
    if (o.offsetParent) {
        do {
        x += o.offsetLeft;
        y += o.offsetTop;
        } while (o = o.offsetParent);
    }
var x1 = e.clientX || window.event.clientX;
var y1 = e.clientY || window.event.clientY;
var le = 100 - (x1 - x);
var to = 10 - (y1 - y);
document.getElementById('file_' + a).style.marginRight = le + 'px';
document.getElementById('file_' + a).style.marginTop = -to + 'px';
}

.inp_field_12 {
position:relative;
overflow:hidden;
float: left;
width: 130px;
height: 30px;
background: orange;
}
.inp_field_12 span {
position: absolute;
width: 130px;
font-family:'Calibri', 'Trebuchet MS', sans-serif;
font-size:17px;
line-height:27px;
text-align:center;
color:#555;
}
.inp_field_12 input[type='file'] {
cursor:pointer;
cursor:hand;
position: absolute;
top: 0px;
right: 0px;
-moz-opacity:0;
filter:alpha(opacity: 0);
opacity: 0;
outline: none;
outline-style:none;
outline-width:0;
ie-dummy: expression(this.hideFocus=true);
}
.inp_field_12:hover {
background-position:-140px -35px;
}
.inp_field_12:hover span {
color:#fff;
}
    回复于
  • 3

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

    回复于
  • 74

    Update 没关系，这不是新兄弟，FF . 适用于所有其他类型的元素，但不适用于文件输入 . 更好的方法是创建一个文件输入和一个链接到它的标签 . 使文件输入显示无和繁荣，它在IE9中无缝工作 .

    警告：这下面的一切都是垃圾！

    通过使用针对其容器定位/调整大小的伪元素，我们可以只使用一个输入文件（不需要额外的标记）和样式 .

    Demo

    <input type="file" class="foo">

.foo {
    display: block;
    position: relative;
    width: 300px;
    margin: auto;
    cursor: pointer;
    border: 0;
    height: 60px;
    border-radius: 5px;
    outline: 0;
}
.foo:hover:after {
    background: #5978f8;
}
.foo:after {
    transition: 200ms all ease;
    border-bottom: 3px solid rgba(0,0,0,.2);
    background: #3c5ff4;
    text-shadow: 0 2px 0 rgba(0,0,0,.2);
    color: #fff;
    font-size: 20px;
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    content: 'Upload Something';
    line-height: 60px;
    border-radius: 5px;
}

    享受家伙！

    Old Update

    把它变成了Stylus mixin . 应该很容易让你们中的一个很酷的SCSS猫转换它 .

    file-button(button_width = 150px)
  display block
  position relative
  margin auto
  cursor pointer
  border 0
  height 0
  width 0
  outline none
  &:after
    position absolute
    top 0
    text-align center
    display block
    width button_width
    left -(button_width / 2)

    用法：

    <input type="file">

input[type="file"]
    file-button(200px)
    回复于
  • 2

    如上所述JGuo和CorySimmons，您可以使用可设置标签的可单击行为，隐藏不太灵活的文件输入元素 .

    <!DOCTYPE html>
<html>
<head>
<title>Custom file input</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</head>

<body>

<label for="upload-file" class="btn btn-info"> Choose file... </label>
<input id="upload-file" type="file" style="display: none"
onchange="this.nextElementSibling.textContent = this.previousElementSibling.title = this.files[0].name">
<div></div>

</body>
</html>
    回复于
  • 8

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

    所以，这里的答案没有任何意义，但无论你如何修改它都会有效 . 您可以使用css更改设计，添加javascript以在更改时显示文件名等，它仍将始终有效 .

    Code:

    这是核心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上显示文件名等 . 只要上面的核心代码保持不变，就不会有任何破坏 .

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

    Demo: JSFIDDLE

    回复于

相关问题