Стилизация элемента типа «FILE»

Question

Как правильно стилизовать кнопку «файл» с изображением, чтобы оно было чистым и красивым во всех браузерах и не было перекрывающегося текста из элемента управления по умолчанию?

Спасибо!

Answer 1

Обычно это делается, делая элемент ввода файла на 100% прозрачным с помощью свойства css opacity и помещая за ним симпатичную кнопку. Таким образом, поле файла все еще получает щелчок, но внешний вид базового элемента может быть стилизован и записан в сценарии любым удобным для вас способом.

Answer 2

Мне нравится этот подход KISS, как обычно. Это работало для меня в Chrome и Firefox.

HTML:

<div class="form-group">
     <label>Cover Image:</label>
     <div id="uploadLabelDiv" class="fade">
         <p>Change cover image</p>
         <label for="upload">
              <img [src]="project.cover" class="img-responsive" id="coverImage" />
          </label>
      </div>
</div>
<input type="file" id="upload" (change)="fileuploaded($event)" style="visibility:hidden;" />

CSS:

#uploadLabelDiv {
  position: relative;
  max-width: 400px;
  background: transparent;
  color: #fff;
  transition: all 0.3s;
}

.fade {
  opacity: 1;
}

.fade:hover > label {
  opacity: 0.4;
}

.fade > p {
  opacity: 0;
  transition: none;
}

.fade:hover > p {
  opacity: 1;
  transition: all 0.3s;
}

p {
  position: absolute;
  top: calc(50% - 30px);
  left: calc(50% - 60px);
  color: black;
  font: bold;
}

Пропущенные классы являются начальной загрузкой.

Answer 3

Кнопки файлов - главная головная боль.Я бы лично использовал http://swfupload.org/