How do I style an upload input using CSS?

Question

To help protect users, you can't really style upload's with CSS. So, the solution then is to hide the real upload and show the user some other element that looks how you want.

I started a JSFiddle that shows how you could mask an invisiable real upload over a simple button or something so that you could style the button - but still get the user to click the upload input.

However, the problem is that I can't get the hover states to work since the real input is floating above the button.

Am I approaching this problem wrong? How do you style upload inputs?

Xeoncross · Accepted Answer · 2011-12-15 18:11:49Z

2

After playing around some more I finally got it working by making the input a child of the Upload button element. I had to make the upload button a div also since it's not correct to have an input as the child of a button.

See it in action here

answered Dec 15, 2011 at 18:11

Xeoncross

57.6k84 gold badges272 silver badges371 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jonas · Accepted Answer · 2011-12-14 19:51:22Z

1

If I understand the question, this is what you want to achieve

jsfiddle.net/yVFWJ/1/

.button {
    width: 47px;
    height: 19px;
    cursor: pointer;
    text-indent: -9999px;
    border: none;
    background-image: url(http://www.hudson-realestate.com/us/images/uploadButton.gif);
}

answered Dec 14, 2011 at 19:51

Jonas

1,0694 gold badges20 silver badges33 bronze badges

1 Comment

Xeoncross Over a year ago

Well, that does replace the background with a custom image - but that image doesn't respond. Perhaps I need to add a hover state to make it a perfectly working example. However, I also tried this so I could use CSS and text instead of images.

robert petranovic · Accepted Answer · 2011-12-14 19:57:28Z

0

Hm... You could use document.onmousemove event. In there you can check if your mouse position is inside the button area. If it is, simply change the class of button to eg "send_button_hover". If it's not, change the class to just eg "send_button".

You can do it using pure JavaScript. It's not very difficult. But it's a lot easier if you use jQuery. You have mousemove() function for handeling event; height() and width() functions to calculate button dimmension; offset functions to calculate position of the button and toggleClass() to change the class of the button.

answered Dec 14, 2011 at 19:57

robert petranovic

3413 silver badges5 bronze badges

Collectives™ on Stack Overflow

How do I style an upload input using CSS?

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related