Styling an input type=“file” button
如何设置输入
你不需要JavaScript!这是一个跨浏览器的解决方案:
看这个例子! - 适用于Chrome / FF / IE - (IE10 / 9/8/7)
最好的方法是使自定义标签元素的
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; } |
然后,您需要做的就是设置自定义
1 2 3 4 5 6 | .custom-file-upload { border: 1px solid #ccc; display: inline-block; padding: 6px 12px; cursor: pointer; } |
1 - 值得注意的是,如果使用
造型文件输入非常困难,因为大多数浏览器不会改变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
创建
三叉戟
从IE10开始,可以使用
1 2 3 4 5 | ::-ms-browse { background: black; color: red; padding: 1em; } |
1 | <input type="file"> |
在Windows 8上的IE10中显示如下:
WebKit的
WebKit为其文件输入按钮提供了一个带有
1 2 3 4 5 | ::-webkit-file-upload-button { background: black; color: red; padding: 1em; } |
1 | <input type="file"> |
这在OS X上的Chrome 26中显示如下:
如果您使用的是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> |
其中产生以下文件输入按钮:
说真的,请查看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/
在设置文件输入样式时,不应该破坏任何本机交互
输入提供。
要不破坏任何内容,您应该使用
使用此技术,您可以轻松地为用户设置单击/拖放区域的样式,并在
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来处理
https://jsfiddle.net/j40xvkb3/
希望这有帮助!
使用jquery很简单。通过略微修改给出Ryan建议的代码示例。
基本的HTML:
1 | <input id="the_real_file_input" name="foobar" type="file"> |
准备就绪时,请务必在输入上设置样式:
您无法设置
单击图像时,设置一些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
我通常会选择
这是我的风格按钮
1 | Upload |
这是input type = file按钮。请注意
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; } |
使用材质/角度文件上传这是一种很好的方法。
您可以使用引导按钮执行相同操作。
注意我使用
1 2 3 4 5 6 7 8 9 | <label> <input type="file" (change)="setFile($event)" style="display:none" /> <mat-icon>file_upload</mat-icon> Upload Document </label> |
本周我还需要自定义按钮并显示所选的文件名,所以在阅读了上面的一些答案后(感谢BTW)我想出了以下实现:
HTML:
1 2 3 4 | <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> |
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | 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)
1 2 3 4 5 6 7 8 9 | 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。
这是一个解决方案,它还显示了所选的文件名:
http://jsfiddle.net/raft9pg0/1/
HTML:
1 2 3 | <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:
1 2 3 4 5 | $(function() { $("input:file[id=file-upload]").change(function() { $("#file-upload-value").html( $(this).val() ); }); }); |
CSS:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | 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; } |
不要被"伟大的"仅限CSS的解决方案所迷惑,这些解决方案实际上是特定于浏览器的,或者将样式按钮覆盖在真实按钮的顶部,或者强制您使用
只需按一下你想要的普通按钮,然后调用一个简单的JS函数来创建隐藏的输入元素并将其链接到你的样式按钮。
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 | <!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> 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); }); |
请注意上述代码在每次用户选择文件后如何重新链接它。这很重要,因为只有在用户更改文件名时才会调用"onchange"。但是,您可能希望每次用户提供该文件时都获取该文件。
我找到了一种将文件按钮切换到图片的简单方法。
您只需标记图片并将其放在文件按钮的顶部即可。
1 2 3 4 5 6 7 8 9 10 11 | <html> <!--This is your labeled image--> <label for="fileButton"><img src="ImageURL"></label> <input type="file" id="fileButton"/> </html> |
单击带标签的图像时,选择文件按钮。
css在这里可以做很多事......有点诡计......
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <input type='file' id='browse'> #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
这是一个简单的css解决方案,可以创建一致的目标区域,并让您根据自己的喜好设计人造元素。
基本的想法是这样的:
这是jsfiddle:http://jsfiddle.net/gwwar/nFLKU/
1 2 3 4 5 6 7 | <form> <input id="faux" type="text" placeholder="Upload a file from your computer" /> Browse <input id="input" size="100" type="file" /> </form> |
正如JGuo和CorySimmons所提到的,您可以使用可设置标签的可点击行为,隐藏不太灵活的文件输入元素。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <!DOCTYPE html> <html> <head> Custom file input <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"> </body> </html> |
更新Nevermind,这在IE或它的新兄弟FF中不起作用。适用于所有其他类型的元素,但不适用于文件输入。更好的方法是创建一个文件输入和一个链接到它的标签。使文件输入显示无和繁荣,它无缝地在IE9 +中工作。
警告:这下面的一切都是垃圾!
通过使用针对其容器定位/调整大小的伪元素,我们可以只使用一个输入文件(不需要额外的标记)和常规样式。
演示
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 | <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; } |
享受家伙!
旧的更新
把它变成了Stylus mixin。你应该很容易让一个很酷的SCSS猫转换它。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | 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) |
用法:
1 2 3 4 | <input type="file"> input[type="file"] file-button(200px) |
如果你正在寻找一个javascript库 - 开箱即用的解决方案,jquery-fileinput工作正常。
最好的方法是使用伪元素:after或:before作为de输入的元素。然后根据需要设置伪元素的样式。我建议你做所有输入文件的一般样式,如下所示:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | input { height: 0px; outline: none; } input[type="file"]:before { content:"Browse"; background: #fff; width: 100%; height: 35px; display: block; text-align: left; position: relative; margin: 0; margin: 0 5px; left: -6px; border: 1px solid #e0e0e0; top: -1px; line-height: 35px; color: #b6b6b6; padding-left: 5px; display: block; } |
使用jQuery的一个非常聪明的解决方案,适用于所有旧浏览器以及新浏览器,我在这里找到。
它使用实际的文件浏览按钮来处理所有样式和click()问题。
我做了一个简单的javascript版本:小提琴
解决方案就像天才一样简单:使文件输入不可见,并使用一段代码将其放在鼠标光标下。
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 51 52 53 54 55 56 57 58 59 60 61 | <span>browse</span> <input id="file_1" name="file_1" type="file" value="" onchange="file_ch(1)"> 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; } |
这些答案很好,它们都适用于非常具体的用例。也就是说,他们是固执己见的。
所以,这里的答案没有任何意义,但无论你如何修改它都会有效。您可以使用css更改设计,添加javascript以在更改时显示文件名等,它仍将始终有效。
码:
这是核心css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | .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:
1 | <input type="file"/> |
如您所见,我们强制将.file-input元素或其任何子元素上发生的任何指针事件(单击)代理到文件输入。这是因为文件输入位于绝对位置,并且将始终消耗容器的宽度/高度。因此,您可以自定义以满足您的需求。将包装器设置为一个按钮,使用一些js在select上显示文件名等。只要上面的核心代码保持不变,就不会有任何破坏。
正如您将在演示中看到的,我添加了一个带有文本"选择文件"的
演示:的jsfiddle
一种快速而粗糙的方法是将标签设置为按钮并将位置设置为绝对值,使其浮动在原始按钮上,您仍然可以看到文件名。我正在考虑移动解决方案。
我发现这种方法最简单,最轻。
以下是工作示例:http://codepen.io/c3zar22/pen/QNoYXN
以下是解释:
-
这将是标记:
1
2
3
4
5<label for="attach-project-file">
<span id="remove-project-file" class="close">x</span>
Click to select a file
</label>
<input id="attach-project-file" type="file"> -
以这样的hacky方式隐藏输入:
1
2
3
4
5
6
7
8#attach-project-file {
width: 0.1px;
height: 0.1px;
opacity: 0;
overflow: hidden;
position: absolute;
z-index: -1;
} -
设置相应的标签样式
1
2
3[for="attach-project-file"] {
/* your styles here */
} -
样式"删除文件"按钮
1
2
3
4
5
6
7
8
9.close {
font-size: 16px;
padding: 10px;
position: absolute;
top: 0;
right: 0;
cursor: pointer;
font-style: normal;
} -
.filename 元素将用于显示所选文件 -
下面是需要注释的JS代码(使用jQuery)使其工作:
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
47var $attach = $('#attach-project-file'),
$remove = $('#remove-project-file'),
$name = $('#attached-project-file');
// initially hide the remove button
$remove.hide();
// do this when file input has changed
// i.e.: a file has been selected
$attach.on('change', function() {
var val = $(this).val();
if (val !== '') {
// if value different than empty
// show the file name as text
// hide/text/fadeIn creates a nice effect when changing the text
$name
.hide()
.text(val)
.fadeIn();
// show the remove button
$remove.fadeIn();
} else {
// if value empty, means the file has been removed
// show the default text
$name
.hide()
.text('Click to select a file')
.fadeIn();
// hide remove button
$remove.fadeOut();
}
});
// remove selected file when clicking the remove button
// prevent click bubbling to the parent label and triggering file selection
$remove.on('click', function(e) {
e.preventDefault();
e.stopPropagation();
$attach
.val('')
.change(); // trigger change event
});
如果有人在没有JavaScript的情况下仍然关心如何做到这一点,让我完成Josh回答:
如何显示文件名的文本:
最简单的方法是将两个元素设置为一个位置:relative,为标签指定一个更高的z-index,并为输入文件提供负边距,直到标签文本位于您想要的位置。不要在输入上使用display:none!
例:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | input[type="file"] { position:relative; z-index:1; margin-left:-90px; } .custom-file-upload { border: 1px solid #ccc; display: inline-block; padding: 6px 12px; cursor: pointer; position:relative; z-index:2; background:white; } |
这是一种交叉兼容的方法,适用于Chrome,Firefox,Safari和IE。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | $(window).on('resize',function() { var eqw = $('input[type=text]').width(); $('textarea').width(eqw - 32); $('.fileoutline').width(eqw); }).trigger('resize'); $('.file+.file').hide(); $(".file").click(function() { var input = $(this).next().find('input'); input.click(); }); $("input[id='file1']").change(function () { $('.file+.file').show(); var filename = $(this).val(); $('.filename1').html(filename); $('.file').find('span').html('CHANGE FILE'); }); $("input[id='file2']").change(function() { var filename = $(this).val(); $('.filename2').html(filename); $('.file').find('span').html('CHANGE FILE'); }); |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | form { width:55%;margin:0 auto;padding-left:3vw;text-align:left; } fieldset{border:0;margin:0;padding:0;} textarea{overflow: auto;height:25vh;resize:none;outline:none;width:93%;background:none;padding:8px 15px;display:block;text-align:left;border:1px solid #000;margin:0;color:#000;font:700 0.85em/2.2 'Futura Book',Arial,sans-serif;} input:focus{outline:none;} input[type=text]{font-weight:700;font-size:0.85em;line-height:2.2;background:none;text-align:left;letter-spacing:0.02em;height:33px;display:block;width:100%;border:none;border-bottom:1px solid #000;margin:0 0 28px;color:#000;} input:focus{outline:0;} .fileoutline { width:100%;margin:25px auto 0px;left:0;right:0;height:40px;border:1px solid #000;position:relative; } input[type=file] { -webkit-appearance: none;-moz-appearance:none;appearance: none;opacity:0;position:relative;width:100%;height:35px;font-weight:700;font-size:0.5em;line-height:28px;letter-spacing:0.2em;position: absolute;left: 0;top: 0;height: 100%;z-index:10; } .file,.filename1,.filename2,#submit { font-size:10px;letter-spacing:0.02em;text-transform:uppercase;color:#ffffff;text-align:center;width:35%;} .file,.filename1,.filename2 { font-weight:200;line-height:28px;} .filename1,.filename2 { width:375px;overflow:hidden;top:0;text-align:right;position:absolute;display:block;height:26px;color:#000;} .file { position:absolute;width:100px;top:6px;left:10px;background:#000;border-radius:14px; } ::-webkit-file-upload-button,::-ms-browse { width: 100%;height:25px;opacity: 0;-webkit-appearance: none;appearance: none; } #submit{border:none;height:32px;background: #000;box-shadow:0 0 0 0.5px #fff,0 0 0 5px #000;margin:35px 0;float:right;display:block;} |
1 2 3 4 5 6 7 8 | <form action="" method="post" enctype="multipart/form-data"> <input type="text" name="email" id="email" placeholder="Email address" /> <input type="text" type="text" name="name" id="title" placeholder="Name" /> <textarea rows="7" cols="40" name="description" id="description" placeholder="Description"></textarea> <span>CHOOSE FILE</span><input type="file" name="file[]" id="file1">NO CHOSEN FILE <span>CHOOSE FILE</span><input type="file" name="file[]" id="file2">NO CHOSEN FILE <input type="submit" name="submit" value="Submit" id="submit"> </form> |
我发现的插件解决方案太重了,所以,我制作了自己的jQuery插件,名为Drolex FileStyle。
此插件允许您根据需要设置文件输入字段的样式。实际上,您将div元素设置为看似欺骗的文件输入,并且实际文件输入将自动覆盖0%不透明度。无需其他HTML。只需在您想要Drolex FileStyle的页面中包含css和js文件就可以了!根据自己的喜好编辑css文件。如果您的页面还没有它,请不要忘记jQuery库。如果客户端未运行JavaScript,则js或css不会修改文件输入。
经测试可在Chrome 24,Firefox 18,Internet Explorer 9中使用。
预计将在以前的版本和其他版本中使用。
下载:http://web.drolex.net/Drolex-FileStyle.zip
只需在单击样式
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | // div styled as my load file button Load from backup <input type="file" id="readFile" /> // Click function for input $("#readFile").click(function() { readFile(); }); // Simulate click on the input when clicking div $("#simClick").click(function() { $("#readFile").trigger("click"); }); |
用于自动检测输入[文件]和样式的jquery版本的teshguru脚本
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 51 | <html> <head> <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"> <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"> $(document).ready(function() { $('input[type=file]').each(function() { $(this).attr('onchange',"sub(this)"); $('click to upload a file').insertBefore(this); $(this).wrapAll(''); }); }); function getFile(){ $('input[type=file]').click(); } function sub(obj){ var file = obj.value; var fileName = file.split("\"); document.getElementById("yourBtn").innerHTML = fileName[fileName.length-1]; } </head> <body> <?php var_dump($_FILES); ?> <center> <form action="" method="post" enctype="multipart/form-data" name="myForm"> <input id="upfile" name="file" type="file" value="upload"/> <input type="submit" value='submit' > </form> </center> </body> </html> |