W3C验证器显示:"此处不允许在input元素上使用size属性。"
<input type="file" name="foo" size="40" />
在HTML5中,指定文件输入框的宽度正确的方法是什么?
在输入字段中使用style属性,这将允许您使用CSS。
<input type="file" name="foo" style="width: 40px" />
或者使用单独的CSS:
input[name="foo"] {
width: 40px;
}
width
在Firefox上也可以使用了。 - djvginput[type=file] { width: 300px; border: 2px solid red; }
width
在Firefox上也可以使用了。 - djvg如其他答案所建议的,可以使用CSS设置整个文件输入框(即按钮和文件名文本)的width
,方法如下:
input[type="file"] {
/* functional */
width: 100%;
/* cosmetic */
background-color: steelblue;
}
<input type="file">
(现在Firefox也可以运行此代码。)
然而,这并没有改变文件选择按钮的宽度。这可能会导致剪裁等问题,正如下面的代码片段所示。
input[type="file"] {
width: 40px;
}
<input type="file">
要修改文件选择按钮的宽度(和/或其他按钮样式),您可以使用::file-selector-button伪元素。例如:
input[type="file"] {
width: 40px;
}
input:last-of-type::file-selector-button {
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
}
/* cosmetic */
body {
display: flex;
flex-direction: column;
gap: 8px;
}
<input type="file">
<input type="file">
text-overflow
规定,它被裁剪并带有省略号。 - djvg::file-selector-button
。 - djvg::file-selector-button
的情况。希望这有所帮助。 - djvg <div style="width: 40%">
<input class="d-flex justify-content-end align-items-center" style="background-color: yellow; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%" type="file" id="file"/>
</div>
<form class="upload-form">
<input class="upload-file" data-max-size="2048" type="file" >
<input type=submit>
</form>
<script>
$(function(){
var fileInput = $('.upload-file');
var maxSize = fileInput.data('max-size');
$('.upload-form').submit(function(e){
if(fileInput.get(0).files.length){
var fileSize = fileInput.get(0).files[0].size; // in bytes
if(fileSize>maxSize){
alert('file size is more then' + maxSize + ' bytes');
return false;
}else{
alert('file size is correct- '+fileSize+' bytes');
}
}else{
alert('choose file, please');
return false;
}
});
});
</script>