37
¿Qué combinación de CSS o atributos se necesita?Configuración uniforme <input type = "file"> width en todos los navegadores
A
Respuesta
31
- ocultar el control real
- Hecho un DIV con los controles y el estilo que desee en la parte superior de la misma
El botón no es un control HTML estándar.
22
lo que está mal con
<input type="file" size="50" .... />
? buscará mismo, excepto Safari en Mac supongo (en Mac, todos los controles de carga tiene un aspecto diferente, en todos los navegadores)
+1
ancho de entrada no hace nada. Quizás esté pensando en el tamaño de entrada, que sí cambia el ancho, pero no en unidades que puede estandarizar en todos los navegadores. – bobince
+0
sí, tienes razón, no presté atención :) –
+1
Esto funciona ... maneja Firefox ... mientras que el ancho de CSS apropiadamente maneja Chrome, IE, y Safari –
7
Además del tutorial quirksmode, aquí es otro buen recurso: http://www.shauninman.com/archive/2007/09/10/styling_file_inputs_with_css_and_the_dom
Si eres ocultando el control real, recuerde que es muy importante establecer la opacidad del control a cero, y no usar realmente visibility: hidden. Hacer eso ocultará realmente el elemento, deshabilitando la acción de hacer clic.
Además, si está ocultando el control con un botón gráfico, tenga en cuenta que en algunos navegadores (Firefox e IE, creo), no podrá cambiar el tipo de cursor a una mano cuando sea sobre la parte de entrada de texto del control de archivo (siempre tendrá como valor predeterminado la entrada o el puntero normal sin enlace). Y sí, lo he intentado usando cursor: pointer (y cursor: hand).
Personalmente, he tenido problemas con los cuadros de carga personalizados, y no hay una bala de azúcar para que su apariencia o personalización sean perfectas. (especialmente con respecto al comportamiento del cursor, ya que considero que un UI trata de romper). Al final del día, creo que es más fácil aceptar que diferentes navegadores procesen el control de manera diferente, y así es como es.
Cuestiones relacionadas
- 1. Problema con <input type = 'text' /> y <textarea> width
- 2. modelo de caja inconsistente entre <input type = "submit" /> y <type = "text" input />
- 3. Relleno adicional en <input type = "text">
- 4. ¿Qué CSS usan los navegadores para el estilo no válido <input type = "email"> s?
- 5. <input type = "file"> - custom styles/css
- 6. Diferencia entre <input type = 'button' /> y <input type = 'submit' />
- 7. Selector CSS para <input type = "?"
- 8. Comprensión <input type = "file">
- 9. Poner en valor por defecto <input type = archivo ....>
- 10. Cómo estilo <input type = "text"> en IE6 CSS?
- 11. ¿Está bien usar <input type = "tel" /> ahora?
- 12. ¿Podemos cambiar <input type = "file"> style?
- 13. HTML <input type = 'archivo'> aplicar un filtro
- 14. ¿`min-width` no funciona en el formulario` input [type = "button"] `elements?
- 15. Cómo crear <input type = "text" /> dinámicamente
- 16. Leyendo archivos locales con <input type = "file">?
- 17. ¿Cómo puedo agregar relleno a <input type = "button">?
- 18. HTML <input type = 'archivo'> Selección archivo de eventos
- 19. ¿Cómo hacer que <input type = "file" /> editable?
- 20. ¿Puede EditorFor() usarse para crear <input type = "file">?
- 21. detectar si <input type = "archivo" /> se apoya
- 22. jQuery set <input type = "range"> value
- 23. ¿Cómo seleccionar múltiples archivos con <input type = "file">?
- 24. Html helper for <input type = "file" />
- 25. Como hacer <span> la misma altura que <input type = "text">
- 26. Ancho de input type = elemento de texto
- 27. input type = "submit" en lugar de input type = "button" con AJAX?
- 28. ¿Puede button_to generar <button> etiqueta en lugar de <input type = "submit" />?
- 29. Object.watch() para todos los navegadores?
- 30. window.href para todos los navegadores
así que no hay forma de lograr esto usando el control nativo en sí mismo? – Larsenal
He actualizado la respuesta. Ver: http://www.quirksmode.org/dom/inputfile.html –
No es necesario usar opacity; simplemente puede delegar el clic en una pantalla: ningún elemento, mucho más simple y no tiene que tomar el tamaño de entrada (variable) en cuenta. –