Html html表单文件上传按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26543139/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-08-29 02:56:29 来源:igfitidea点击:
html form file upload button
提问by Chan Chun Weng
Is it possible to move the "browse" or "choose file" button to the right?
是否可以将“浏览”或“选择文件”按钮向右移动？
http://jsfiddle.net/2mw935qf/1/
http://jsfiddle.net/2mw935qf/1/
<form method="POST" action="uploadFile" enctype="multipart/form-data">
<strong>Upload file:</strong>
<input type="file" name="file" />
</form>
like this?
像这样？
采纳答案by BobTale
Use this code in your CSSfile. It worked for me in Chrome.
在您的CSS文件中使用此代码。它在 Chrome 中对我有用。
input[type=file] {
-webkit-appearance: textfield;
position: relative;
-webkit-box-sizing: border-box;
}
input[type=file]::-webkit-file-upload-button {
width: 0;
padding: 0;
margin: 0;
-webkit-appearance: none;
border: none;
}
/* "x::-webkit-file-upload-button" forces the rules to only apply to browsers that support this pseudo-element */
x::-webkit-file-upload-button, input[type=file]:after {
content: 'Browse...';
display: inline-block;
left: 100%;
margin-left:3px;
position: relative;
-webkit-appearance: button;
padding: 3px 8px 2px;
}
回答by Роман Гуйван
<form method="POST" action="uploadFile" enctype="multipart/form-data">
<strong>Upload file:</strong>
<input type="file" name="file" />
<input type="submit" style="float:right;" value="Upload" />
</form>
