HTML表单文件上传按钮

Question

能否将“浏览”或“选择文件”按钮移到右边？

http://jsfiddle.net/2mw935qf/1/

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

想要实现 这样 的效果吗？

- Chan Chun Weng

---

请参考以下网址以更改文件上传按钮的样式：https://dev59.com/9m445IYBdhLWcg3wWI6L - Роман Гуйван

Answer 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;
}

- BobTale

Answer 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输入中的浏览按钮。 - Quentin