How to change upload button to text?

Question

I have used upload file (type=file) to upload a file. I want to change the button to text. Since the user will using either Google chrome or IE. So I have to consider both browsers. I would prefer simple code. Here is my code (I'm using multiple upload files)

<td><input type="file" name="picture[]" id="picture" ></td>

thanks

Your question isn't clear. Wouldn't changing the input to `type="text` solve your problem? — j08691, Sep 26 '13 at 15:48
ok can you post your form and tell what exactly you want to change? — Jason OOO, Sep 26 '13 at 15:49
I've edited your tags as I can't see how this would be related to `PHP`, I gather this is a layout / formatting issue, hence `HTML` & `CSS`. — Wrikken, Sep 26 '13 at 15:55
sorry for making most of you confusing, what i mean is to css the upload button (browse/choose file button) to a text something like 'click to choose file' so when people click on that text it will popup box to choose file — Misz Jieha, Sep 27 '13 at 00:05

Ben Jackson · Accepted Answer · 2013-11-20T01:40:59.333

If I understand right, you're asking about styling input tags with type="file". This is pretty difficult, but what I usually do is wrap the input, and include another tag that will show the desired style. I then position the input tag on top (so that it can still be clicked), but make it transparent so the underlying style shows through. Something like:

HTML:

<div class="uploadWrapper">
    <p>Click to choose file</p>
    <input type="file" name = "filedata" size="100" />
</div>

CSS:

.uploadWrapper {
    overflow: hidden;
    position: relative;
    height: 25px;
    width: 250px;
    background: rgb(10,100,210);
}

.uploadWrapper input {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
}

.uploadWrapper p {
    margin: 0 10px;
    position: absolute;
    line-height: 25px;
}

http://jsfiddle.net/BYossarian/NVr6t/

score 0 · Answer 2 · edited May 23 '17 at 12:03

0

"Each browser has it's own rendition of the control and as such you can't change either the test or the orientation of the control." - Original Source

However, I believe you can be a bit tricky and modify the button with CSS.

#picture {
    text-decoration: none;
    /*  etc... */
}

edited May 23 '17 at 12:03

Community

1
1

answered Sep 26 '13 at 15:51

Rogue

11,105
5
45
71

How to change upload button to text?

2 Answers2