Can we change style?

Question

I tried to change the HTML form, input type file. Here is my code:

HTML, form id = form

<input class="upload_file" type="file" id="file" name="file" />

.CSS

I tried both:
.upload_button{
  background: url('../images/upload_btn_bg.png') no-repeat;
  width: 200px; 
  height: 40px;
}

#form input[type=file]{
  background: url('../images/upload_btn_bg.png') no-repeat;
  width: 200px; 
  height: 40px;
}

None of both of those methods works. I did see from some website, like facebook, youtube, google or twitter, they have different style. Wonder how they do it.

score 13 · Accepted Answer · answered May 13 '10 at 09:12

13

You can't do anything with input type file (other than huge hacks). I know this sounds horrible, but the web standards still haven't come up with a solution for that.

What I would suggest though, is that you used something more flexible, such as swfUpload, which let's you change stiles, and also check for file size prior to uploading.

Some neat examples of it can be found here

Hope this helps you

answered May 13 '10 at 09:12

Marcos Placona

21,468
11
68
93

ah... I should have asked this question earlier here, instead of spending hours time to debug it. Sigh – learner.php May 13 '10 at 09:15
4

That's alright. We've all done that :-) – Marcos Placona May 13 '10 at 09:25
so many security risks with swf, but ok. – nagytech Jul 04 '13 at 00:55
2

http://markusslima.github.io/bootstrap-filestyle/ – newshorts May 26 '14 at 01:49

Donald Derek · Answer 2 · 2014-12-18T03:08:06.547

9

Best hack ever. Input file HTML:

<input type="file" class="hide" id='inputFile' />
<a href="#" id="triggerFile" class="btn btn-primary">Browse File</a>

using jQuery:

$('#triggerFile').on('click', function(e){
        e.preventDefault()
        $("#inputFile").trigger('click')
    });

edited Dec 18 '14 at 03:08

answered Sep 16 '13 at 17:21

Donald Derek

2,529
2
23
17

score 9 · Answer 3 · answered May 13 '10 at 09:10

9

For example, try this variant http://www.quirksmode.org/dom/inputfile.html

answered May 13 '10 at 09:10

Gopher

917
6
18

score 6 · Answer 4 · edited May 23 '17 at 12:00

6

Why don't you just put the css to display: none and then trigger this button with another button? This can be easily done with javascript and then you can style the button yourself completely

Here's an example of how to trigger a button with another, but this is just one of many ways: One button firing another buttons click event

edited May 23 '17 at 12:00

Community

1
1

answered Mar 22 '13 at 13:37

user1282947

83
1
6

score 1 · Answer 5 · answered Feb 02 '12 at 17:09

1

You can change the font-Size for height or follow this url http://www.quirksmode.org/dom/inputfile.html ( which is basically what I do in my projects ).

answered Feb 02 '12 at 17:09

Thiago Miranda de Oliveira

5,790
5
20
24

Thanks! I tried line-height but that doesn't work. Looks like font-size style on the type="file" is the only way to get tall buttons. You can see the problem here http://jsfiddle.net/gabrieleromanato/mxq9R/ also the cursor looks wrong, trying to fix that next. – PJ Brunet Apr 24 '13 at 21:50

score 0 · Answer 6 · edited Jul 30 '11 at 10:42

0

Actually you can!

You have to do it with the SI.Files Library.

Here is a good article about how its done in details:

Good Luck!

edited Jul 30 '11 at 10:42

TLP

66,756
10
92
149

answered Jul 29 '11 at 11:42

Habib Hoxha

66
2

score -3 · Answer 7 · answered May 20 '13 at 13:22

-3

Bhee, just add CSS definitions to your html input tag:

like:

<select style:"...whatYoureadBelow..."></select>

or

<input style:"...whatYoureadBelow..." />

CSS definitions:

border:none;
background-image:url('somePathToImage');
background-repeat:no-repeat;
//those things below adjust according to your background image size
width:XXpx;
height:XXpx;

Thus you'll get what you have on facebook or elsewhere ;)

answered May 20 '13 at 13:22

Błażej Kocik

1,689
1
17
20

You obviously didn't read the question OP asked... – SteveB Jul 09 '13 at 11:57

Can we change style?

7 Answers7

Linked

Related