Jump to content
  • 0

Как убрать поле ввода названия файла input type=file?


amelice
 Share

Question

Всем привет!

Хочу видеть одну кнопку с названием "Загрузить" а не "Обзор...".

С этим возникли трудности:

1.Подскажите как убрать поле ввода названия файла который создается тегом <input type="file">?

2.Возможно ли поменять название этой кнопки?

value не действует.

Link to comment
Share on other sites

7 answers to this question

Recommended Posts

  • 0

По поводу названия кнопки не уверен, быть может сделать его прозрачным и картинку подложить? А вот поле наверное вполне можно убрать если обернуть во что-то с шириной и оверфлоу хидден, выравнять там вправо или, если не выйдет, позиционированием.

Link to comment
Share on other sites

  • 0

Насколько я в курсе, можно только целиком подменить своей картинкой. По дефолту каждый браузер в каждой ОСи рисует кто во что горазд, а надпись на кнопке вообще зависит от языка установки...

Link to comment
Share on other sites

  • 0

Всем привет!

Хочу видеть одну кнопку с названием "Загрузить" а не "Обзор...".

С этим возникли трудности:

1.Подскажите как убрать поле ввода названия файла который создается тегом <input type="file">?

2.Возможно ли поменять название этой кнопки?

value не действует.

<input type="file"> генерируется каждым браузером по-своему (+/- похожие только FF, Opera, IE; Хром и Сафари генерируют их совсем по-другому) и практически не стилизуются, поэтому что-то убрать или изменить напрямую не получится.

Решают подобные вопросы обычно следующим образом. Берут подходящий элемент, стилизуют его, а сверху накладывают <input type="file"> с opacity: 0

Link to comment
Share on other sites

  • 0

Насколько я в курсе, можно только целиком подменить своей картинкой. По дефолту каждый браузер в каждой ОСи рисует кто во что горазд, а надпись на кнопке вообще зависит от языка установки...

Спасибо, то, что нужно, щас буду пытать. :)

Берут подходящий элемент, стилизуют его, а сверху накладывают <input type="file"> с opacity: 0

Хороший вариант, только opacity не работает в ИЕ8, что мне нужно.

Link to comment
Share on other sites

  • 0

Насколько я в курсе, можно только целиком подменить своей картинкой. По дефолту каждый браузер в каждой ОСи рисует кто во что горазд, а надпись на кнопке вообще зависит от языка установки...

Спасибо, то, что нужно, щас буду пытать. :)

Берут подходящий элемент, стилизуют его, а сверху накладывают <input type="file"> с opacity: 0

Хороший вариант, только opacity не работает в ИЕ8, что мне нужно.

Для ИЕ используется фильтр. В принципе, этот способ и изложен по ссылке выше :)

Link to comment
Share on other sites

  • 0

Для ИЕ используется фильтр. В принципе, этот способ и изложен по ссылке выше :)

Решение есть, и мы не придумывали велосипед, мы его тюнинговали. Все, кто стилизует инпуты действуют по той же схеме: создается инпут с нулевой прозрачностью и ставится поверх кнопки или изображения, которые представляют собой кнопку выбора файла.

Ага, так и оказалось. :)

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy