<rmcreative>

RSS

Свой input[type=file]

31 июля 2012

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

+

input[type=file] обрачивается в контейнер:

<div class="file_upload">+<input type="file" /></div>

Далее применяем немного CSS:

.file_upload {
  /* Для того, чтобы спозиционировать input
     относительно контейнера. */
  position: relative;
  /* Скрываем неумещающуюся часть input-а. */
  overflow: hidden;
 
  /* Украшательство: */
  background: #eee;
  border: 1px solid #ccc;
  font-size: 30px;
  line-height: 1;
  text-align: center;
  padding: 20px;
  width: 40px;
}
 
.file_upload input[type=file] {
  /* Позиционируем правый верхний край
     input поверх нашего контейнера.
     Правый верхний потому как именно там
     у нас кнопка. */
  position: absolute;
  top: 0; right: 0;
 
  /* Делаем input побольше, чтобы он точно
     перекрыл контейнер. */
  font-size: 200px;
 
  /* Делаем input невидимым. По-другому нельзя,
     иначе браузер не будет на него реагировать. */
  opacity: 0;
  filter: alpha(opacity=0);
 
  /*  Украшательства: */
  cursor: pointer;
}

UPD: ещё одно решение.

Комментарии RSS

  1. А как у этого решения с событиями? Больше всего интересует работа hover и наличие title.

  2. №6513
    Sam
    Sam 31.07.2012, 3:26:17

    Сам input реагирует на change, то есть можно устроить сабмит. Также реагирует на mouseover и mouseout, что позволяет применить нужные стили для hover и реализовать свой title.

  3. №6514
    Бари Бетткер
    Бари Бетткер 31.07.2012, 9:04:10

    Правильней использовать lable, вот так

    <label for="file"><input type="file" id="file" /></label>

    Тогда и инпут можно спрятать (display:none) и hover на лейбле работает

  4. display:none разве взлетит? input[type=file], насколько я помню, требует физического клика мышкой. Или я путаю что-то?

  5. №6518
    MT
    MT 31.07.2012, 18:34:32

    @Николай Харитонов: Можно заключить скрываемый INPUT в блок с нулевыми размерами и oveflow: hidden или сдвинуть его с помощью position: absolute за пределы элемента LABEL, которому задать overflow: hidden.

  6. №6522
    Sam
    Sam 31.07.2012, 19:28:24

    Бари Бетткер, MT, как уже озвучил, Николай Харитонов, ваше решение работать не будет.

  7. №6524
    MT
    MT 31.07.2012, 20:00:35

    @Sam: У нас с Бари разные решения. Моё решение (с использованием position: absolute вместо display: none) работает везде, но применительно к <input type="file" /> у Firefox, похоже, баг. А вот с submit-кнопками работает безотказно во всех браузерах (именно таким образом кнопки обычно и стилизую).

  8. №6525
    MT
    MT 31.07.2012, 20:12:03
  9. №6527
    Sam
    Sam 31.07.2012, 20:28:17

    Ну, submit можно и напрямую стилизовать. Учитывая баг, выходит, что моё решение пока единственное рабочее.

    За ссылку на баг спасибо.

  10. №6534
    MT
    MT 01.08.2012, 1:59:54

    submit можно и напрямую стилизовать

    Можно, но с точностью до пиксела (pixel-perfect) и без использования нестандартных CSS-свойств, как известно, проблематично.

  11. №6540
    dizpers
    dizpers 03.08.2012, 21:27:49

    В хроме (по крайней мере в 20 и 21) есть баг - не виден курсор pointer. При этом в фф все ок. В других браузерах не проверял. Решение проблемы было найден на SO

    ::-webkit-file-upload-button { cursor:pointer; }
  12. №7303
    Роман
    Роман 24.12.2012, 23:21:05

    Вот кроссбраузерное решение в 2 кб. verstkawebsaita.ru/masterskaya-verstalshchika/veb-formy/input-file/jquery-plagin-customfile

  13. №9773
    Жора
    Жора 30.04.2015, 9:28:13

    Объясните кто-нибудь, как работает свойство? filter: alpha(opacity=0);

  1. Почта опубликована не будет.

  2. Можно использовать синтаксис Markdown или HTML.

  3. Введите ответ в поле. Щёлкните, чтобы получить другую задачу.