你如何风格输入类型=“文件”按钮?
<输入类型=“文件” />
当前回答
当点击有样式的<div>时，只需使用trigger()函数模拟点击<input>。我在<div>中创建了自己的按钮，然后在点击我的<div>时触发了输入上的单击。这允许你创建你想要的按钮，因为它是一个<div>，模拟点击你的文件<input>。然后在<input>上使用display: none。
// div styled as my load file button
<div id="simClick">Load from backup</div>
<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");
});
其他回答
我能够做到这与纯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;"> < / >标签
这是一个纯CSS，无javascript，无bootstrap, 100%跨浏览器的解决方案!只需剪切粘贴一个样式块，然后测试您的文件上传控制。
这个解决方案不像其他文章那样试图隐藏然后重新创建原始HTML元素。它使用纯CSS，没有任何马戏团技巧或第三方工具，为所有主要浏览器设置原始文件上传表单控件的样式。你甚至不需要改变你的HTML代码!只需剪切并粘贴下面的代码到你的网页来测试它…
<style>
/* Note: This CSS will style all instances of
<input type=file /> controls in your website. */
input[type="file"],
input[type="file"]:visited,
input[type="file"]:hover,
input[type="file"]:focus,
input[type="file"]:active {
margin:0;
padding: 0em 0em;/* fallback: older browsers like IE 1-8 need "em" */
padding: 0rem 0rem;/* older browsers dont know what "rem" is */
overflow: hidden; /* long file names overflow so just hide the end */
background: #fff;
border-radius: .2em;
border-radius: .2rem;
outline: none;
border: 2px solid #bbb;
cursor: pointer;
-webkit-appearance: textfield;
-moz-appearance: textfield;
}
input[type="file"]:hover {
background: #f9f9ff; /* Optional rollover color: I am using a light blue to indicate an interaction */
border: 2px solid #999;
}
input[type="file"]:visited,
input[type="file"]:focus,
input[type="file"]:active {
background: #fff; /* Default back to white when focused. */
border: 2px solid #999;
}
/* Note: These "disabled" selectors blow up in IE so have to be separated from the same styles above. */
input[type="file"]:disabled {
margin: 0;
padding: 0em 0em;
padding: 0rem 0rem;
overflow: hidden; /* long file names overflow so just hide the end */
background: #ddd;
border-radius: .2em;
border-radius: .2rem;
outline: none;
border: 2px solid #bbb;
cursor: pointer;
-webkit-appearance: textfield;
-moz-appearance: textfield;
}
input[type="file"]:disabled:hover {
background: #ddd; /* disabled-readonly buttons should be grey */
border: 2px solid #999;
}
input[type="file"]:disabled:visited,
input[type="file"]:disabled:focus,
input[type="file"]:disabled:active {
background: #ddd; /* disabled-readonly buttons should be grey */
border: 2px solid #999;
}
/* IE UPLOAD BUTTON STYLE: This attempts to alter the file upload button style in IE. Keep in mind IE gives you limited design control but at least you can customize its upload button.*/
::-ms-browse { /* IE */
display: inline-block;
margin: 0;
padding: .2em .5em;
padding: .2rem .5rem;
text-align: center;
outline: none;
border: none;
background: #fff;
white-space: nowrap;
cursor: pointer;
}
/* FIREFOX UPLOAD BUTTON STYLE */
::file-selector-button {/* firefox */
display: inline-block;
margin: 0rem 1rem 0rem 0rem;
padding: .18em .5em;
padding: .18rem .5rem;
-webkit-appearance: button;
text-align: center;
border-radius: .1rem 0rem 0rem .1rem;
outline: none;
border: none;
border-right: 2px solid #bbb;
background: #eee;
white-space: nowrap;
cursor: pointer;
}
/* CHROME AND EDGE UPLOAD BUTTON STYLE */
::-webkit-file-upload-button { /* chrome and edge */
display: inline-block;
margin: 0rem 1rem 0rem 0rem;
padding: .19em .5em;
padding: .19rem .5rem;
-webkit-appearance: button;
text-align: center;
border-radius: .1rem 0rem 0rem .1rem;
outline: none;
border: none;
border-right: 2px solid #bbb;
background: #eee;
white-space: nowrap;
cursor: pointer;
}
</style>
<input type="file" id="fileupload" name="fileupload"
value="" tabindex="0" enctype="multipart/form-data"
accept="image/*" autocomplete="off" multiple="multiple"
aria-multiselectable="true" title="Multiple File Upload"
aria-label="Multiple File Upload" />
<br /><br />
<input disabled="disabled" type="file" id="fileupload"
name="fileupload" value="" tabindex="0"
enctype="multipart/form-data" accept="image/*"
autocomplete="off" multiple="multiple"
aria-multiselectable="true" title="Disabled Multiple File Upload"
aria-label="Disabled Multiple File Upload" />
这是文件上传控件在Firefox、Chrome和Edge中使用下面的CSS的样子。这是一个非常简单干净的设计。你可以把它变成你喜欢的样子:
Internet Explorer为您提供了有限的设计控制，但至少您可以使用CSS操作控件来更改一些东西，包括圆形边框和颜色:
我的解决方案的优点是:
You stick with simple CSS to style the original HTML input control You can see one or more file names in the file input textbox Screen readers and ARIA-friendly devices can interact normally with your file upload control You can set tabindex on your HTML element so its part of the tab order Because you are using plain HTML and CSS, your file input button works perfectly in old and new browsers ZERO JavaScript required! Runs and loads lighting fast in even the oldest of browsers Because your are not using "display:none" to hide the control, its file block stream data is never disabled from reaching the server in any old or new browser version known
你不需要愚蠢的JavaScript技巧，Bootstrap，或尝试隐藏/重新创建你的文件输入控件。这只会破坏所有在线用户的可用性。样式化原始HTML控件意味着你的文件上传控件在25年的新老浏览器中都能很好地工作。
This is why you cannot trust all these scripted hacks here that erase, rewrite, or destroy HTML just to try and recreate some visual experience. That shows that you do not understand how HTML is used or why its been around for 30 years practically unchanged. You should never try and rewrite HTML's native form control functionality. Why? There is more to using natural HTML in websites than just manipulation of markup for some forced visual experience. The trade-offs of limited visual design in these replaced HTML elements was designed that way for a reason.
我的建议是:坚持使用简单的HTML和CSS解决方案，作为web开发人员，你将没有任何问题。
<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>
用css隐藏它，并使用$(selector).click()自定义按钮来激活浏览按钮。然后设置检查文件输入类型值的时间间隔。interval可以显示用户的值，这样用户就可以看到上传了什么。当表单提交时，间隔将清除[编辑]对不起，我一直很忙，是想更新这篇文章，这里是一个例子
<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;
});
});
这里有一个解决方案，它没有真正对<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>
希望这能有所帮助!!
推荐文章
- 使伸缩项目正确浮动
- 如何取消最大高度?
- 形式内联内的形式水平在twitter bootstrap?
- 自定义元素在HTML5中有效吗?
- 如何选择在最后一个子元素之前的元素?
- 如何触发自动填充在谷歌Chrome?
- CSS变换，锯齿边缘在铬
- 创建圈div比使用图像更容易的方法?
- 强迫孩子服从父母的弯曲边界在CSS
- 为什么Chrome浏览器不正确地确定页面是在不同的语言，并提供翻译?
- 在CSS中@apply是什么?
- 在网页上用鼠标模拟震颤(例如帕金森病)?
- Bootstrap抛出Uncaught错误:Bootstrap的JavaScript需要jQuery
- 如何改变文本区域的边框颜色:焦点
- 我如何设置背景颜色为文本的宽度，而不是整个元素的宽度，使用CSS?
