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>

喜欢this？

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

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>