CODEWITHSUNDEEP
cssforms
samquo
samquo

Reputation: 757

Styling input type=file not working as expected

I'm creating a css template for form types and want to give form inputs a rounded border. This works well with type=text but doesn't work with type=file (for file upload).

What am I doing wrong? 

.tempform input[type="text"] {
  -moz-border-radius: 10px;
}

.tempform input[type="file"] {
  -moz-border-radius: 10px;
}

<div class="tempform">
   <label for="textfield">Test Text Field</label>
   <input type="text" id="textfield" name="textfield"></div>
</div>

div class="tempform">
   <label for="filefield">Test File Field</label>
   <input type="file" name="filefield" id="filefield-0">
   <input type="file" name="filefield" id="filefield-1">
</div>

Upvotes: 2

Views: 4573

Answers (2)

kijin
kijin

Reputation: 8910

Unfortunately, it's impossible to style a file upload input, besides changing the width a little bit. Browsers just don't allow any other change. If you want to style your file upload input, you'll have to use a nasty hack like placing an almost invisible file upload input on top of an image (which only works in some browsers), or a JavaScript solution like ajax-upload.

Upvotes: 3

brettkelly
brettkelly

Reputation: 28205

According to the first Google search result, it's rather involved. See this article on quirksmode.org for information on how to do it.

Upvotes: 2

Related Questions