Estilo de entrada de archivo personalizado | Programar Plus

Si está interesado en el estilo específico de Webkit / Blink / Chrome, hay un pseudo elemento patentado para ocultar, y luego use un psudeo-on-an-input también no estándar:

<input type="file" class="custom-file-input">

.custom-file-input::-webkit-file-upload-button {
  visibility: hidden;
}
.custom-file-input::before {
  content: 'Select some files';
  display: inline-block;
  background: linear-gradient(top, #f9f9f9, #e3e3e3);
  border: 1px solid #999;
  border-radius: 3px;
  padding: 5px 8px;
  outline: none;
  white-space: nowrap;
  -webkit-user-select: none;
  cursor: pointer;
  text-shadow: 1px 1px #fff;
  font-weight: 700;
  font-size: 10pt;
}
.custom-file-input:hover::before {
  border-color: black;
}
.custom-file-input:active::before {
  background: -webkit-linear-gradient(top, #e3e3e3, #f9f9f9);
}

Manifestación

Vea las entradas de archivo personalizadas de Pen en WebKit / Blink por Chris Coyier (@chriscoyier) en CodePen

Advertencia justa: no muestra el nombre de archivo seleccionado, pero es posible que pueda modificarlo para hacerlo. Por lo general, en estos días se desencadena un evento después de la selección del archivo y, de todos modos, se capturan los datos de esa manera.

Formularios WTF

Siempre vale la pena comprobar cómo lo hacen los formularios WTF también:

Vea la entrada de archivo de lápiz de formularios WTF por Chris Coyier (@chriscoyier) en CodePen.