There is such a layout
<input type="file" name="userfile" size="20" class="form-control"> But for some reason it shows in Russian although the site is in English.
How to make it show in English? Here is an example.
Sasha Omelchenko
10.9k four 20 52
duddeniska duddeniska
2.071 eight 36 80
- oneThe language and appearance of the widget depends on the browser, not the site. If the operating system uses the English interface, then the label on the button will be English. - Sergey Gornostaev
|
1 answer
input[type='file'] is one of the most tricky things in terms of style and processing.
The browser practically does not allow to customize it (for obvious reasons).
The way of the samurai is to hide the original element (glory to Allah, even though the opportunity to hide is left) and bring out your own, when clicked on which, we launch the hidden element:
.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 />")' /> - A good example, but the main disadvantage of this method is that the name of the attached file is not displayed - And Rey
- @AndRey, this is easily fixed with straight arms, here is just a basis, an example. - user207618
|