<form method="post" enctype="multipart/form-data" class="popup">
<div class="popup_pd">
<p class="text-field">Ваше имя <input type="text" name="name" placeholder="Введите ваше имя" class="input-field" value=""></p>
<p class="text-field">Эл почта <input type="email" name="email" placeholder="Введите ваш email" class="input-field"></p>
<p class="text-field">Телефон <input id="phone_raschet" type="text" name="phone" placeholder="Введите ваш номер телефона" class="input-field" value=""></p>
<p class="text-field">Комментарий <input type="text" name="message" placeholder="Напишите комментарий" class="input-field"></p>
<p class="text-field">Прикрепить файл
<input name="image" type="file" id="input__file" class="input input__file input-field" multiple>
<label for="input__file" class="input__file-button">
<span class="input__file-icon-wrapper"><img class="input__file-icon" src="https://svgshare.com/i/_PN.svg" alt="Выбрать файл" width="20"></span>
<span class="input__file-button-text" id="input__tfile"></span>
</label>
</p>
</div>
<div class="button-background">
<input class="light-button send-button" name="callback" type="submit" value="Отправить">
</div>
</form>
.input__file-icon-wrapper {
height: 30px;
width: 30px;
margin-right: 15px;
display: box;
display: flexbox;
display: flex;
box-align: center;
flex-align: center;
align-items: center;
box-pack: center;
flex-pack: center;
justify-content: center;
border-right: 1px solid #fff;
}
.input__file {
opacity: 0;
visibility: hidden;
position: absolute;
}
.input__file-button {
width: 100%;
height: 35px;
background-color: #ebebeb;
border: 1px solid #ebebeb;
color: rgba(128,128,128,);
font-size: 15px;
display: box;
display: flexbox;
display: flex;
box-align: center;
flex-align: center;
align-items: center;
box-pack: start;
flex-pack: start;
justify-content: flex-start;
cursor: pointer;
}
.input__file-button-text {
line-height: 1;
margin-top: 1px;
}
(function(){
let inputs = document.querySelectorAll('#input__file');
Array.prototype.forEach.call(inputs, function (input) {
let label = input.nextElementSibling,
labelVal = label.querySelector('#input__tfile').innerText;
input.addEventListener('change', function (e) {
let countFiles = '';
if (this.files && this.files.length >= 1)
countFiles = this.files.length;
if (countFiles)
label.querySelector('#input__tfile').innerText = 'Выбрано файлов: ' + countFiles;
else
label.querySelector('#input__tfile').innerText = labelVal;
});
});
})();
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.