Последнее обновление на 29.01.2023
JQUERY CSS для кнопки загрузки или отправки файлов
function uploadFile(target) { document.getElementById("new-df-fake").innerHTML = target.files[0].name; }
Код CSS
.new-buttondown { position: relative; } .new-df { opacity: 0; visibility: hidden; position: absolute; } .new-df-buttondown { /*ваш стиль */ } #new-df-fake { height: 32px; width: 150px; display: flex; display: -webkit-box; display: -ms-flexbox; align-items: center; -webkit-box-align: center; -ms-flex-align: center; padding: 0 15px; border: 1px solid #c7c7c7; border-radius: 3px; border-right: none; overflow-x:hidden; /* текст не выходил за границы */ float: left; } .new-df-button { width: 150px; height: 32px; background: orange; color: #fff; font-size: 18px; font-weight: 700; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-pack: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-box-pack: center; align-items: center; justify-content: center; border-radius: 3px; cursor: pointer; }
Код html
<div class="new-buttondown"> <input name="file" type="file" name="file" id="new-df-2" class="new new-df" onchange='uploadFile(this)'> <label class="new-df-buttondown" for="new-df-2"> <div id="new-df-fake">Файл не выбран</div> <div class="new-df-button">Выберите файл</div> </label> </div>
Демонстрация работы кнопки отправки файлов
Ваш комментарий будет первым