Сегодня 12 июля, суббота ГлавнаяНовостиО проектеЛичный кабинетПомощьКонтакты Сделать стартовойКарта сайтаНаписать администрации
Поиск по сайту
 
Ваше мнение
Какой рейтинг вас больше интересует?
 
 
 
 
 
Проголосовало: 7281
Кнопка
BlogRider.ru - Каталог блогов Рунета
получить код
RMCreative.ru - Блог
RMCreative.ru - Блог
Голосов: 1
Адрес блога: http://rmcreative.ru/feed/
Добавлен: 2008-06-12 21:34:00 блограйдером ZaiSL
 

Свой input[type=file]

2012-07-31 02:19:41 (читать в оригинале)

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

+

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



 


Самый-самый блог
Блогер ЖЖ все стерпит
ЖЖ все стерпит
по сумме баллов (758) в категории «Истории»


Загрузка...Загрузка...
BlogRider.ru не имеет отношения к публикуемым в записях блогов материалам. Все записи
взяты из открытых общедоступных источников и являются собственностью их авторов.