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

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;
}

Добавлено: 20 Февраля 2015 20:41:54 Добавил: Андрей Ковальчук Нравится 0

Добавить