Непосредственно input
изменить не получится, но можно его убрать и работать с ним опосредованно.
Можно подсмотреть на jQuery-File-Upload demo
Делаем кнопку, внутрь вставляем название кнопки и input
.
<span class="btn btn-success fileinput-button">
<span>Select files...</span>
<!-- The file input field used as target for the file upload widget -->
<input id="fileupload" name="files[]" multiple="" type="file">
</span>
Прячем и предусмотрительно увеличиваем input
:
.fileinput-button input {
cursor: pointer;
font-size: 200px;
position: absolute;
top: 0px;
right: 0px;
margin: 0px;
direction: ltr;
opacity: 0;
}
Теперь он невидим и занимает все пространство кнопки. demo
Второй способ:
<input type="file" id='upload' />
<label for="upload" class="button">Upload</label>
css:
#upload{
display: none;
}
demo
Теперь можно настраивать внешний вид кнопки произвольным образом.