Как верстается этот элемент (input type="file")?

Question

[Alexander]

Всем привет! пришёл за советом.
Через что верстается этот элемент ?
вряд ли через css , думал через jquery. Но хотелось бы узнать правильный подход.

Answer 1

[D']

Еще один вариант:
input[type=file] скрывается (display:none;)
И далее с jQuery:

$('красивая-кнопочка').on('click', function () {
  $('инпут-файл').click();
});

Comments

[Alexander]

Может это должен быть "trigger" вместо " $('инпут-файл').click();"

[Inwork277]

Alexander: .click() это вариант записи .trigger('click') тоже
https://api.jquery.com/click/

Answer 2

[Stalker_RED]

tl;dr Рисуем красивую кнопочку, и поверх нее размещаем прозрачный input type="file"

А верстать через jQuery, это как жарить яичницу через вилку. Вроде как и то и другое и про еду, но что-то не сходится.

UPD
Я вот даже пример нашел jsfiddle.net/mv68hdo3/6
Если opacity поменять на 1, сразу видно как оно устроено jsfiddle.net/mv68hdo3/7

Comments

[Alexander]

Отличная подход , щя попробую

[dpismenny]

Alexander: да какой подход? даже на хабре про это статьи пишут. поищите)

[Alexander]

Денис Письменный: есть ссылка ?

[dpismenny]

Alexander: лень гуглить, там 5 строк css.

Answer 3

[NKros]

habrahabr.ru/post/189570

Comments

[Alexander]

Выбрать
Файл не выбран

Нет не походит для моей задачи. Я эту статью уже проверял.

Answer 4

[HAbRAhabp]

Вот так например я себе делал
jsfiddle.net/mv68hdo3/8