Как стилизовать input type=file?

Question

[kiril9011]

Есть код:

<label for="uploadbtn" class="uploadButton">Загрузить файл</label>
                  <input type=hidden name='MAX_FILE_SIZE' value='3000000'><input type=file name=file2 style="opacity: 0; z-index: -1;" id="uploadbtn"><br>

Стилизация type=file отлично работает, но как сделать, чтобы после выбора файла вместо "Загрузить файл" было имя файла или "Файл выбран"?

Answer 1

[Stalker_RED]

Никак.
Сделай его прозрачным, и под ним напиши что угодно. Можно даже котика нарисовать.

Comments

[kiril9011]

напишите пожалуйста что и куда написать?

[Дмитрий Лузанов]

Котики это топчик, сайт может сразу взлететь в поисковой выдаче

Answer 2

[Александр Алексеев]

стили сами напишите

<label class="form-control"> 
	<input class="form-control" type="file" name="data[file]" placeholder="Прикрепите файл" style="display: none;">
 	<button class="js-labelFile"> 
 		<span class="js-fileName">Прикрепить файл</span> 
 	</button> 
</label>

$(function(){
		$('input[type=file]').each(function() {
      var $input = $(this),
          $label = $input.next('.js-labelFile'),
          labelVal = $label.html();

      $input.hide();
      $input.on('change', function(element) {
          var fileName = '';
          if (element.target.value) fileName = element.target.value.split('\\').pop();
          fileName ? $label.addClass('has-file').find('.js-fileName').html(fileName) : $label.removeClass('has-file').html(labelVal);
      });
    });
	});

Answer 3

[Дмитрий Дерепко]

Здесь применяют технику создания и показа фейк-объекта, а реальный объект существует в DOM'е, но скрыт.
Вот понятный пример, правда статья из 2015-го года.
https://tympanus.net/codrops/2015/09/15/styling-cu...

Comments

[kiril9011]

пожалуйста помогите кодом

[Дмитрий Дерепко]

kiril9011, мы здесь учим ловить, а не потреблять.
Ваша задача - не редкая, но стандартов решения нет. Берите гуглите ваш вопрос, копируйте решения и пробуйте.
Если совсем нет желания, то попробуйте Bootstrap https://getbootstrap.com/docs/4.3/components/forms...