html表单文件上传按钮答案

【问题标题】：html form file upload buttonhtml表单文件上传按钮
【发布时间】：2014-10-24 07:13:10
【问题描述】：

是否可以将“浏览”或“选择文件”按钮向右移动？

<form method="POST" action="uploadFile" enctype="multipart/form-data">
<strong>Upload file:</strong> 
<input type="file" name="file" />
</form>

喜欢this？

【问题讨论】：

检查stackoverflow.com/questions/4909228/style-input-type-file

标签： html file-upload multipart

【解决方案1】：

在您的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;
}

【讨论】：

【解决方案2】：

<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>

【讨论】：

问题是关于 file 输入中的 browse 按钮。