Question

64

Custom Upload Button

rated 0 times [ 65] [ 1] / answers: 1 / hits: 40663 / 13 Years ago, thu, june 23, 2011, 12:00:00

hi i was just wondering how you can create you own custom file upload button, because the best i can do is

enter

and what i want to achieve is

enter

if there is anyway of doing this i would be very thankful,
and please can i have answers that explain how to do it with code and not answers with links to websites that allow you to download a button or something like that,Thank You :)

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

tobyl

Add To Favorites

Follow

Total Points: 598

Total Questions: 110

Total Answers: 114

Location: Vietnam

Member since Sat, Feb 12, 2022

2 Years ago

tobyl questions

1 How to update State of chart.js in React

Tue, Aug 10, 21, 00:00, 3 Years ago

1 Angular Jasmine this service method is a not a function

Wed, Jan 13, 21, 00:00, 3 Years ago

1 Double sided input slider in React

Tue, Dec 1, 20, 00:00, 4 Years ago

1 Formatting Strings to Datetime using specific formats in Luxon

Mon, Nov 2, 20, 00:00, 4 Years ago

1 Cannot find module 'react-native-reanimated/plugin' from /projectFolder

Thu, Sep 3, 20, 00:00, 4 Years ago

View All

answered 13 Years ago rhett · Accepted Answer

Although some of these answers will create something that looks like you want it to work, they will break down when they try to perform the way that you expect. The file input doesn't style well directly and you will have trouble trying it. However, there is a trick.

The trick is to turn the opacity of the input to 0 and then change the background underneath it to the button style that you want.

.file_button_container,

.file_button_container input {

     height: 47px;

     width: 263px;

 }



 .file_button_container {

     background: transparent url(http://i.stack.imgur.com/BT5AB.png) left top no-repeat;

 }



 .file_button_container input {

     opacity: 0;

 }

<div class=file_button_container><input type=file /></div>