你如何风格输入类型=“文件”按钮?
<输入类型=“文件” />
你如何风格输入类型=“文件”按钮?
<输入类型=“文件” />
当前回答
我发现这种方法最简单、最轻便。
下面是工作示例:http://codepen.io/c3zar22/pen/QNoYXN
以下是解释:
this would be the markup: <label for="attach-project-file"> <span id="remove-project-file" class="close">x</span> <div class="filename" id="attached-project-file">Click to select a file</div> </label> <input id="attach-project-file" type="file"> hide the input in a hacky way like this: #attach-project-file { width: 0.1px; height: 0.1px; opacity: 0; overflow: hidden; position: absolute; z-index: -1; } style the corresponding label instead [for="attach-project-file"] { /* your styles here */ } style "remove file" button .close { font-size: 16px; padding: 10px; position: absolute; top: 0; right: 0; cursor: pointer; font-style: normal; } .filename element will be used to display the selected file below is the commented JS code needed (using jQuery) to make it work: var $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 });
其他回答
当点击有样式的<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");
});
如果有人仍然关心如何在没有JavaScript的情况下做到这一点,让我完成Josh的回答:
如何显示文件名的文本:
最简单的方法是将这两个元素设置到一个位置:相对,给标签一个更高的z-index,并给输入文件负边距,直到标签文本在你想要的位置。不要在输入时使用display:none !
例子:
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;
}
用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;
});
});
按照以下步骤,你就可以为你的文件上传表单创建自定义样式了:
this is the simple HTML form(please read the HTML comments I have written here below) <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> then use this simple script to pass the click event to file input tag. function getFile(){ document.getElementById("upfile").click(); } Now you can use any type of styling without worrying about how to change default styles.
我非常清楚这一点,因为我已经尝试更改默认样式一个半月了。相信我,这是非常困难的,因为不同的浏览器有不同的上传输入标签。所以使用这个来构建您的自定义文件上传表单。这里是完整的自动上传代码。
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(); } #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; } <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>
更新没关系,这不能工作在IE或它的新兄弟,FF。可以正常工作在其他类型的元素上,但不能工作在文件输入上。更好的方法是创建一个文件输入和一个链接到它的标签。使文件输入显示无和boom,它在IE9+无缝工作。
警告:以下所有内容都是垃圾!
通过使用根据容器定位/调整大小的伪元素,我们可以只使用一个输入文件(不需要额外的标记),并按通常的方式设置样式。
Demo
<input type="file" class="foo">
<style>
.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;
}
</style>
享受的家伙!
旧的更新
把这个变成了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)