CODEWITHSUNDEEP
htmlcssfile-upload
TheOne
TheOne

Reputation: 11161

How to change the behavior and style of an html file field?

I'd like to create a file upload field that displays an input type=text (displaying the filename), with the upload button replaced with a custom image.

Something like this:

enter image description here

A simple solution without any hacks would be appreciated.

Upvotes: 0

Views: 319

Answers (3)

Anis
Anis

Reputation: 3609

If you are using jQuery, have a look at this plugin - https://github.com/ajaxray/bootstrap-file-field

This tiny plugin will display the file input field as a bootstrap button (with configurable classes), similar in all browser and will show selected file names (or selection errors) beautifully.

Additionally you can set various restrictions using simple data-attributes or JS settings. e,g, data-file-types="image/jpeg,image/png" will restrict selecting file types except jpg and png images.

Upvotes: 0

Ballu Rocks
Ballu Rocks

Reputation: 1226

 <INPUT type="image" class="myButton" value="">

.myButton {
background:url(YOUR IMAGE) no-repeat;
cursor:pointer;
width: 200px;
height: 100px;
border: none;
}

using buttons 

<button type="submit" style="border: 0; background: transparent">
<img src="/images/Btn.PNG" width="90" heght="50" alt="submit" /> 
</button>

Upvotes: 0

John Conde
John Conde

Reputation: 219934

You won't find any solutions that aren't hacks due to how browsers handle the file upload field. Due to security concerns they restrict the amount of styling you can do to them to prevent a malicious website from making them look like something they are not. How limited you are varies from browser to browser but without using JavaScript and hacky tricks you will not be able to style a file upload field to your liking through straight HTML/CSS.

Upvotes: 2

Related Questions