KnowledgeHub
Questions
Tags
Users
Search
Alex Rivera
|
Logout
Edit Question
Title
Body
Following the CSS style trick from this question I was able to create a custom upload button. Now, the challenge is to make the entire portion of the button change the mouse pointer icon to the hand one. The way I partially achieved this can be seen here (jSFiddle) . As you can see, the cursor only appears to be a hand while hovering the right area of the the button (I'm in the latest version of firefox). The css (also on jSFiddle) <span id="uploadMask"> <input type="file" multiple="multiple" name="file" id="file_upload"> <span class="button">Select Documents</span> </span> The css (also on jSFiddle) #uploadMask { width:160px; display: block; float:left; overflow: hidden; height:32px; margin-right: 5px; position: relative; } #uploadMask input { position: absolute; top:0; bottom: 0; right:0; opacity: 0; z-index: 2; cursor: pointer; } #uploadMask .button { background:#ccc; line-height:24px; padding:5px 15px; display:block; } Any ideas?
Tags (comma-separated)
Save Edits
Cancel