Как можно применить стили к кнопке в input[type="file"]?

Question

[Alex]

Хочу немного изменить внешний вид кнопки в input[type="file"] чтобы больше подходила к стилю сайта. Но проблема в том, что сайт модульный. Т.е. стили должны применяться непосредственно к input[type="file"] и не зависить от наличия определённого родителя.
Не интересует прям 100% кросбраузерность. Достаточно чтобы работало хотя бы в самых популярных на последних версиях

Comments

[Сергей delphinpro]

В такой постановке вопроса — никак. Этот элемент практически не стилизуется. Кнопка в нем вообще не стилизуется.

И позволю себе заметить, что html можно поменять всегда. На чем бы не работал сайт.

[Alex]

Сергей delphinpro, Очень жаль.

Физически изсенить html я могу. Но делать этого нельзя, так как множество форм генерируются сторонними плагинами. И у каждого своя верстка формы. Я лишь создаю визуальное оформление

Answer 1

[stransens]

создать label к этому инпуту, а инпут скрыть. label оформить как необходимо

<label htmlFor='single-file'>
                        <div className='upload'>
                        </div>
                </label>
                <input type='file' id='single-file'/>

Comments

[Alex]

как я и написал в вопросе:

стили должны применяться непосредственно к input[type="file"] и не зависить от наличия определённого родителя

Можете считать что я никак не могу изменять html.

[stransens]

насколько я знаю - без label никак. в крайнем случае дописать label с помощью js на лету, если есть такая возможность

Answer 2

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

<label class="form-control"> 
	<input class="form-control" type="file" name="data[file]" placeholder="Прикрепите файл" >
 	<span class="js-labelFile"> 
 		<span class="js-fileName">Прикрепить файл</span> 
 	</span> 
</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);
      });
    });
	});

решение с подставлением имени файла на кнопку