Styling html file input button and "no file selected" text

Question

I am building a html form that needs file uplod. While I got the file upload part working, I am unable to get the styling of form upload button and " No file selected" text.

My desired markup is enter image description here

Is there a way to do it?

PS: Please ignore the green text ( "Upload a screen shot"). I have that working.

Current behavior the button and the "no file chosen"is in the same line.

HTML Code:

 <div class="formField">
    <label for="fileToUpload">Upload a screen shot (optional) </label>
    <input type="file" name="fileToUpload" id="fileToUpload"/> 
 </div>

Fiddle: http://jsfiddle.net/5tLokkjh/

possible duplicate of HTML file upload "no file selected" text style — Roflo
– Roflo, Commented Sep 25, 2015 at 17:00

jchue · Accepted Answer · 2014-12-18 02:42:01Z

0

You could enter a line break after the label:

<div class="formField">
  <label for="fileToUpload">Upload a screen shot (optional)</label><br />
  <input type="file" name="fileToUpload" id="fileToUpload"/> 
</div>

But it's much better to use CSS:

label {
  display: block;
}

<div class="formField">
  <label for="fileToUpload">Upload a screen shot (optional)</label>
  <input type="file" name="fileToUpload" id="fileToUpload" />
</div>

Setting display: block on an element makes it fill the entire width of the page.

edited Dec 18, 2014 at 2:42

answered Dec 18, 2014 at 2:35

jchue

12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user3861559 Over a year ago

Thanks! But it still doesn't behave the way I need it ( like in the image in my first post).

Collectives™ on Stack Overflow

Styling html file input button and "no file selected" text

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related