How can I create an HTML custom upload button that changes to a hand cursor when hovered

Utilizing the CSS style tip shared in this post, I successfully designed a custom upload button. However, the new challenge is to ensure that the entire button area changes the mouse pointer icon to a hand.

You can view my partial solution here (jSFiddle). Currently, the cursor only switches to a hand when hovering over the right portion of the button (tested in the latest version of Firefox).

The CSS code is also available on jSFiddle.

<span id="uploadMask">
    <input type="file" multiple="multiple" name="file" id="file_upload">
     <span class="button">Select Documents</span>
 </span>

The CSS code on jSFiddle looks like this:

#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 suggestions or thoughts on how to rectify this issue?

htmlcssfile-upload

Answer №1

It appears that the cursor property does not work on the text part of the <input type="file">, but the button section does display the hand pointer.

http://jsfiddle.net/gN2JM/17/

No hand cursor on the red part!

Referencing a solution from this question:

Is there a way to make the native `browse` button on a file input larger cross browser?

To increase the button size, you can add the following CSS:

#uploadMask input {
    font-size:200px; /* Any high number to ensure it's large enough,
                        overflow:hidden on the parent takes care of the rest */
}

http://jsfiddle.net/gN2JM/15/

Answer №2

If you remove the opacity: 0;, you will notice a specific area where the cursor:pointer does not appear. Check out http://jsfiddle.net/gN2JM/13/ When hovering over the actual button, the cursor behaves normally.

Refer to THIS for a solution that claims to work consistently, or adjust the position of the button to go beyond the screen edge>> http://jsfiddle.net/gN2JM/14/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to manage DOM modifications in a responsive design layout?

Developing a responsive website with only one breakpoint can be challenging, especially when restructuring the DOM to accommodate different screen sizes. It's important to consider not just CSS and media queries, but also how the elements are arranged ...

javascriptjquerycssdomresponsive-design

Refine the table by selecting rows that contain a specific value in the href attribute of the <a> tag, and display the parent row when the child row

I've been working on filtering and searching the table below based on the href value. My code successfully filters the displayed columns in the table, but it fails to work when I search for a string within the href attribute. For instance, if I searc ...

javascripthtmljquerycss

Steps for adjusting the margin of a section using the p tag

Newbie CSS inquiry here... Here's what I currently have in my stylesheet: #topheader { position: absolute; width: 100%; height: 100px; background-color: #D1E6DA; font-size: 200%; } I want to include the following: p { margi ...

css

Interactive website powered by a dynamic database system and featuring HTML pages

I am currently working on a project involving a cutting-edge dynamic database driven website where users can engage by posting, commenting, liking, and more. I have been contemplating the idea of using HTML pages instead of PHP pages. Essentially, wh ...

phphtmlajaxdynamic

Troubleshooting issues with rowspan in a Datatable

I am currently utilizing jQuery DataTables to display my grid data and implementing the rowspan concept with the rowsGroup option. Initially, it works well by spanning some rows and looking visually pleasing, but eventually, it starts failing. Here are so ...

javascriptjqueryhtmldatatables

Pressing the up arrow in Javascript to retrieve the most recent inputs

Is there a way to retrieve the most recent inputs I entered in a specific order? For example: I have an array with 20 elements, and every time I enter something, I remove the first element from the array and add the new input at the end. So, when I press ...

javascripthtmljquerymemoryinput

Transform a <td> into a table-row (<tr>) nested within a parent <tr> inside an umbrella structure

Similar questions have been asked in the past, but I still haven't found a solution to my specific inquiry. Here it is: I have a table that needs to be sortable using a JavaScript plugin like ListJS. The key requirement is that I must have only one & ...

javascripthtmlcsshtml-table

Encountering an undefined variable error with Ruby on Rails 6 Bootstrap after restarting the server

I'm facing an issue in rails 6 where upon server restart, I encounter an Error: Undefined variable. Oddly enough, if I comment out the SCSS variables in my files, refresh the page, then un-comment them and refresh again, everything works as expected a ...

cssruby-on-railsrubybootstrap-4

Verify if a personalized angular directive is able to display or conceal an element

I have a custom directive that toggles the visibility of an element based on the value of another service. I attempted to write a test to verify if the directive functions as intended. Initially, I used the ":visible" selector in my test, but it consistent ...

javascriptjqueryhtmlcssangularjs

Highlight columns and rows when hovered over in a striped table using CSS styling

I have successfully implemented a CSS-only method for highlighting table columns on hover from a tutorial I found at https://css-tricks.com/simple-css-row-column-highlighting/ However, I am encountering an issue with applying the highlight to striped tabl ...

htmlcss

Clicking on a jQuery element will reveal a list of corresponding elements

I've retrieved a list of elements from the database and displayed them in a table with a button: <a href="#" class="hiden"></a> To show and hide advanced information contained within: <div class="object></div> Here is my jQ ...

javascriptjqueryhtmltoggle

What is the best placement for video content in a website development project?

Storing images in a folder named images is recommended for better website organization and SEO benefits. But what about local video content? Should it go in a folder labeled videos? ...

htmlassetsdirectory-structure

Troubleshooting issues when utilizing flexbox in Firefox and Chrome version 48

Chrome 47 Behavior: The .scroll div scrolls correctly in Chrome 47, taking up 100% height using flex. Firefox Behavior: In Firefox, the .scroll div does not scroll properly and instead uses the content height. What is the solution that works across diffe ...

htmlcssscrollflexbox

What is the quickest way to redirect a URL in WordPress?

Is it possible to redirect a URL instantly in WordPress using this script code? JavaScript Code: jQuery(document).ready(function() { var x = window.location.href; if (x == 'http://example.com/') { window.location.hr ...

javascriptphphtmlwordpress

What is preventing me from extracting all information from online shopping sites?

Recently, I've been tackling a project that involves scraping data from various e-commerce websites. However, I've encountered difficulties in extracting the desired information from these sites. For instance, when attempting to scrape all the li ...

pythonhtmlweb-scrapingbeautifulsoup

My Angular Router is creating duplicate instances of my route components

I have captured screenshots of the application: https://ibb.co/NmnSPNr and https://ibb.co/C0nwG4D info.component.ts / The Info component is a child component of the Item component, displayed when a specific link is routed to. export class InfoComponent imp ...

javascripthtmlangulartypescriptroutes

Using jQuery's .html() method to update the inner HTML of an element can cause the .click() event on a form button to stop functioning

There is a puzzling issue with my HTML form button and jQuery functionality. The button is supposed to trigger a .click() event from a JavaScript file, and it was working perfectly until I used jQuery .html() to replace the main page content with the form ...

javascripthtmljquerybuttononclick

What is the best way to incorporate a linear gradient into the background image using bootstrap?

I'm working on a react app and I'd like to apply a linear gradient of 0.7 to the background image using bootstrap. Can anyone help me with this? <Carousel.Item> <img className='banner-bg d-block w-100 bg-dark bg-gradient &apo ...

cssreactjsreact-bootstrapbootstrap-5

Difficulty arises when trying to extract specific information from an ajax response using the jQuery.filter

The code snippet below seems to be causing some trouble. It's supposed to filter HTML content that includes a div with the class "filtered_entries_box", but it's not working as expected. $.ajax({ "url" : "start.php", "type" : "POST", ...

javascriptjqueryhtmlajax

Having trouble getting my absolute div to center?

Check out this problem on my server at THIS LINK .login-div{ background: #fff none repeat scroll 0 0; height: 500px; left: 50%; width: 500px; right: 0; z-index: 99999; top: 20%; position: ...

htmlcss