Wednesday, January 27, 2016

Make the file type input controls in HTML show only a button and not an adjacent field or copy reading "No file selected."

I fought with this some yesterday. If you use CSS to make the control exactly ninety pixels wide you will end up with something that more or less just shows the button in IE, Firefox, Chrome, and Safari. I did not test with other browsers. However, in IE there is an ever-so-tiny "form field" clinging to the left of the button, and in Firefox you see the N of "No file selected." The Firefox problem may be sidestepped by setting the color in CSS to be the background color of piece of the page the control sits on top of. This will make the N invisible more or less. However, this is all still hacky as hell. I found this this morning which suggests you should just slap display:none; as a style on the control and show a button which forces a click on the control with jQuery when a user in turn clicks the button. I haven't tried that. I'm giving up on the file type input to use the sister control that DevExpress offers which should let me restrict what file types are handed in. This suggests as much is going to take some jumping through flaming hoops with a regular file type input control.

No comments:

Post a Comment