CODEWITHSUNDEEP
htmlcssfileformsinput
ria
ria

Reputation: 7508

how to make the file input field wrap?

In a HTML form I have a file field like this:

<div class="filefield">
<input type="file" name="myfile" id="fileinput">
</div>

It displays a button and some text besides the button. When no file has been selected yet, the text is: No file chosen. If there is a file already selected, it displays the name of the file.

This text displays on the right side of the button. I want it to display below the button. I have tried numerous things in CSS, and nothing works, the No file chosen just always displays on the right side of the button, even if both the div and the input are given fixed widths only as wide as the button, and a fixed height high enough for a button and two lines of text, the text still displays on the right, outside of the div, and not below where the is space inside the div. How to make it wrap so the text displays below the button?

Upvotes: 9

Views: 7827

Answers (3)

hookedonwinter
hookedonwinter

Reputation: 12666

With @Guffa's answer showing that you can't mess with that field, you could create a hack around it.

What about a button element, that on click acts like a file browser button? And then a span element that holds the value of that file browser input? It would be some js hackery for sure, but could solve the problem.

EDIT

Working example: http://jsfiddle.net/nmeAW/1/

Edit 2

Even more better working example: http://jsfiddle.net/nmeAW/2/

Upvotes: 8

Jared Farrish
Jared Farrish

Reputation: 49198

You might look into jQuery and some of the upload file plugins that can help you "restyle" the input essentially by hiding it and activating/displaying file selected information in html.

http://www.tutorialchip.com/jquery/9-powerful-jquery-file-upload-plugins/

http://www.uploadify.com/demo/

http://www.plupload.com/example_queuewidget.php

http://blogs.bigfish.tv/adam/2009/06/14/swfupload-jquery-plugin/

Upvotes: 3

Guffa
Guffa

Reputation: 700322

You can't. The file input field is a single control, even if it looks like several controls that could be controlled separately.

Besides, how the file input control is displayed depends entirely on what browser you are using. It's appearence is not specified in the standards, so any browser vendor can choose to display it any way they see fit.

Upvotes: 5

Related Questions