input type=file на английском языке

397

28 февраля 2017, 14:56

Есть такая верстка

<input type="file" name="userfile" size="20" class="form-control">

Но показывает почему то на русском хотя сайт на английском.

Как сделать так что бы показывало на английском? Вот пример

Answer 1

input[type='file'] - одна из самых каверзных вещей в смысле стилистики и обработки.
Браузер практически никак не даёт его кастомизировать (по очевидным причинам).

Путь самурая - скрыть оригинальный элемент (слава Аллаху, хоть возможность скрыть оставили) и вывести своё, при клике на которое, запускаем скрытый элемент:

.uploadButton { 
    display: block; 
    width: 100px; 
    background: #3df; 
    padding: 10px; 
    color: #FFF; 
    font-size: 16px; 
    font-weight: bold; 
    font-family: Tahoma; 
    text-align: center; 
    border-radius: 10px; 
    cursor: pointer; 
} 
.uploadButton:hover { 
    background: #3ce; 
} 
.uploadButton div{ 
  color: #00097d; 
}

<label for="uploadbtn" class="uploadButton">Загрузить файл<div></div></label> 
<input style="opacity: 0; z-index: -1;" multiple type="file" name="upload" id="uploadbtn" onchange='document.querySelector(".uploadButton div").innerHTML = Array.from(this.files).map(f => f.name).join("<br />")' />