Kozack
@Kozack
Thinking about a11y

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

Хочу немного изменить внешний вид кнопки в input[type="file"] чтобы больше подходила к стилю сайта. Но проблема в том, что сайт модульный. Т.е. стили должны применяться непосредственно к input[type="file"] и не зависить от наличия определённого родителя.
Не интересует прям 100% кросбраузерность. Достаточно чтобы работало хотя бы в самых популярных на последних версиях
  • Вопрос задан
  • 403 просмотра
Пригласить эксперта
Ответы на вопрос 2
stransens
@stransens
создать label к этому инпуту, а инпут скрыть. label оформить как необходимо
<label htmlFor='single-file'>
                        <div className='upload'>
                        </div>
                </label>
                <input type='file' id='single-file'/>
Ответ написан
<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);
      });
    });
	});


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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы