Нестандартный input[type=file]

 slikNET    2013-09-04    HTML & CSS 0 комментариев

нестандартный input file

Для начала html

<div class="wrapper">
  <div class="inputField">
    <input type="text" readonly="readonly" />
  </div>
  <div class="file">
    <span class="text">выбрать файл</span>
    <input id="file" type="file" />
  </div>
</div>

Потом css

.wrapper {
  display: table;
  font-family: Arial;
}
.inputField {
  float: left;
}
.inputField input {
  width: 166px;
  border: 1px solid #cdcccc;
  height: 26px;
}
.file {
  width: 105px;
  height: 26px;
  overflow: hidden;
  background: #2c75af;
  position: relative;
  margin-left: 185px;
}
input[type=file]#file {
  width: 60px;
  border: none;
  opacity: 0;
  filter: alpha(opacity=0);
  padding: 0px;
  margin: 0px;
  position: absolute;
}
.text {
  color: #faf8f8;
  font-size: 13px;
  display: table;
  left: 10;
  line-height: 24px;
  position: absolute;
}
.file.active {
  background: #40a7e1;
}

И на конец jquery

/* Это нужно для того, что бы при выборе файла input не оставался пустым */
$('input[type=file]#file').change(function(){
    $('.inputField input').val($(this).val());
});
/* При наведении мыши добавим класс, что бы кнопка казалась активной */
$('input[type=file]#file').mouseover(function(){
    $('.file').addClass('active');
    $(this).css('cursor','pointer');
});

$('input[type=file]#file').mouseout(function(){
    $('.file').removeClass('active');
});
/* Также добавим возможность загрузки файла по нажатию на вспомогательный input */
$('.inputField input').click(function(){
    $('input[type=file]#file').trigger('click');
});