CSS оформление file input элемента формы, кроссбраузерное, для jQuery 1.3.2 или выше

Это поразительно, но нигде нет достойного отлаженного скрипта для стилизования элемента загрузки файла - во многих, правда, используется jQuery 1.4, что в моей задаче не подходит - в Drupal 6 должен использоваться только jQuery 1.3.2.

Предлагаю исправленный вариант скрипта от Scott Jehl, с исправленными его багами, а так же его интеграция в Друпал

Интегрировать так:
включить js файл и добавить немного css:

/*custom upload elements*/
.customfile-input { position: absolute; height: 36px; cursor: pointer; background: transparent; border: 0; opacity: 0; -moz-opacity: 0; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0); z-index: 999; left:0; top:0;  width:255px; }
 
.customfile {  
	height:36px;
	color:#888;
	border:solid 1px #b4b1b2;
  border-right:none;
	line-height:36px;
	font-size:14px;
  width:255px;
  overflow: hidden;
  cursor: pointer;
  position: relative;   
}
.customfile-disabled { opacity: .5; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0); cursor: default;  }
.customfile-button {
  float: right; 
  background: url("../images/silver-button.png") repeat-x scroll left top transparent;
  border:solid 1px #d9d9d9;
  border-top:none;
  border-bottom:none;
  font:bold 12px Arial;
  letter-spacing:0.02em;
  text-transform:uppercase;
  color:#888;
  height:36px;
  width:88px;
  line-height:36px;
  text-align:center;
}
 
.customfile-feedback {
  padding-left:5px;
}
Прикреплённые файлы: 
Drupal 6, 7

Комментарии

Добавить комментарий