Create a custom file input

Question

I am working on a custom file input with the following HTML:

<div class="file">
  <a>browse<input type="file" name="annex"/></a>                 
  <span class="path">path</span>
</div>
<div class="help">Only PDF files allowed</div>

You can see an online example here: http://codepen.io/mdmoura/pen/qAvDk

PROBLEMS

CSS

I am not able to vertically align the button (in red) text and the path text (in blue). I tried to apply inline-block and the same padding for both but no luck ... How can I solve it?

JQUERY

I use var input = $(this); but if I use var this = $(this); it doesn't work. Why?
Using $('.path').text(label); works ... But I would like to get the span after the :file that I am referencing ... I tried input.next().text(label); but it does not work. Why?

Thank You, Miguel

You have set padding: 8px 0px; in "div.file a" class for vertical align. — krutssss
– krutssss, Commented Oct 3, 2013 at 10:31
Sorry, I don't get it ... I just updated my example: codepen.io/mdmoura/pen/qAvDk. The a and span are vertically aligned in Chrome and Safari but not in IE and Firefox. Any idea how to solve this? — Miguel Moura
– Miguel Moura, Commented Oct 3, 2013 at 10:48
You have set float: left; in "div.file a" class And also set padding: 8px; "div.file span" its works in firefox — krutssss
– krutssss, Commented Oct 3, 2013 at 10:58
I think using float made it work ... Can my code be simplified? Any suggestion is welcome. — Miguel Moura
– Miguel Moura, Commented Oct 3, 2013 at 11:38

Explosion Pills · Accepted Answer · 2013-10-03 10:27:48Z

1

CSS Problem

Not a problem in all browsers, but the anchor and span will align if you remove the padding from span, add vertical-align: middle to the anchor and remove it's negative bottom margin.

JS Problems

this is not mutable. It can't be assigned and this actually creates a syntax (I think) error

Invalid left hand assignment

There are a variety of ways to set this when declaring or calling a function, but var input = $(this) is a common solution. I would just stick with that.

As for your selector, you would need to use input.parent().next(). The input is a child of the anchor and has no siblings.

answered Oct 3, 2013 at 10:27

Explosion Pills

192k56 gold badges341 silver badges417 bronze badges

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

1 Comment

Miguel Moura Over a year ago

CSS Problem: I tried your suggestion but I keep having problems in Firefox and IE. It works in Chrome and Safari. Any idea? JS problems solved ...

Collectives™ on Stack Overflow

Create a custom file input

1 Answer 1

CSS Problem

JS Problems

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

CSS Problem

JS Problems

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related