html - marcadores - Cómo alinear verticalmente el nombre del archivo en la entrada del archivo en Chrome

exportar marcadores firefox

Question

Tenemos una entrada de archivo en nuestro sitio que no es tan alta como en la demostración (ver más abajo: lo he exagerado para mostrar mejor el problema) pero no podemos hacer que el nombre del archivo se centre verticalmente, solo el botón se centra verticalmente. Esto normalmente no sería un problema, ya que usualmente nos quedamos con el estilo predeterminado, pero en este caso el cliente quiere un borde en esta entrada para que el borde derecho se alinee con algunos botones alineados a la derecha debajo de él. La altura, en nuestro caso, es 23px (igual para la altura de la línea).

Consulte http://jsfiddle.net/UK72P/ para obtener una demostración. Que yo sepa, esto solo sucede en Chrome y posiblemente en IE9 / 8 (se confirmará en breve). El código en jsfiddle es:

HTML

<input type="file">​

CSS

input {
    display: inline-block;
    height: 40px;
    line-height: 40px;
    border: 1px solid #999;
}

1.

¿Hay alguna propiedad que no sepa o esto simplemente no es posible?

Gracias de antemano, Richard

Answer 1

Es un problema del navegador. Consulte aquí para obtener una solución: http://www.quirksmode.org/dom/inputfile.html

Answer 2

Usa Chrome Hack

input{-bracket-:hack[;line-height:50px;];}

Pero no cumplió con nuestro requisito. Entonces para este propósito hago este violín.

http://jsfiddle.net/hassaan39/hTezL/3/

Answer 3

El problema parece ser un error en Chrome, ya que mueve el botón al pie de la línea, pero no mueve el texto generado para nada. La solución es establecer su altura utilizando el margen y usar un div incluido si desea un borde.

HTML

<div class="file-border">
  <input type=file>
</div>

CSS

.file-border {
  border: 1px solid #999;
}

input {
  margin: 10px 0;
}

Implementado en este violín

Answer 4

input[type="file"] {
  line-height: 10px;
}

Esto funcionó para mí, Chrome 29.0.1547.57

Answer 5

Puede alinear verticalmente el campo del archivo de entrada usando el botón de entrada de archivo:

input[type="file"]::-webkit-file-upload-button {
  vertical-align: middle;
  height: 100%;
}

Answer 6

La otra solución funciona simplemente porque la altura de la línea es lo suficientemente pequeña, por lo que tendría más sentido usar una altura de línea de 0.

Esto todavía tendrá una altura distinta de cero, simplemente elimina el "relleno"; para mí, el margen y el relleno en la entrada del archivo fue 0 por defecto.

input[type="file"] {
  line-height: 0;
}