html form file upload button

Question

Is it possible to move the "browse" or "choose file" button to the right?

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

like this?

check http://stackoverflow.com/questions/4909228/style-input-type-file — Роман Гуйван, Oct 24 '14 at 07:23

score 2 · Accepted Answer · answered Oct 24 '14 at 08:08

Use this code in your CSS file. It worked for me in 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;
}

score -1 · Answer 2 · answered Oct 24 '14 at 07:15

-1

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

answered Oct 24 '14 at 07:15

Роман Гуйван

1,118
6
14

The question is asking about the *browse* button that is part of the `file` input. – Quentin Oct 24 '14 at 07:20

html form file upload button

2 Answers2