CODEWITHSUNDEEP
htmlfile-uploadinput
user2212243
user2212243

Reputation: 39

How to customize html message <input type=“file”>?

I am trying to customize the message of my input type file that already looks like this:

http://www.hangar-hosting.com/descargas/01.png

i need to vertical align middle that "not file chosen" and change the text of both "choose file" and "no file chosen"

Upvotes: 3

Views: 4676

Answers (3)

Phoenix Bird
Phoenix Bird

Reputation: 1247

you can customize like this:

<style type="text/css">
#upload-file-container input {
   filter: alpha(opacity=0);
   opacity: 0;   
}
</style>

<br />
<label>Please click the Image to Upload a file:</label>
<div id="upload-file-container">
<input type="file" name="photo" />
</div>

Upvotes: 2

Fleming Slone
Fleming Slone

Reputation: 177

Adding padding as in Evan's example works to vertically align the text. The text itself is being generated by the system:

http://community.mybb.com/thread-59344.html

Upvotes: 0

What have you tried
What have you tried

Reputation: 11148

http://jsfiddle.net/5rp5e/2/ (Working example)

 <div id="background">
<input type="file" value="choose file" />
</div>

CSS:

#background{
    padding:20px;
    background: #ccc;
    width: 300px; /* or whatever you want it to be */
}

Upvotes: 0

Related Questions