按钮光标未切换为pointer问题求助：z-index方案无效

Let’s work through why your cursor isn’t switching to a pointer on that upload button, even after tweaking z-index. Looking at your code, there are two small but impactful fixes that should resolve this:

1. Make Sure the Hidden File Input Fully Covers the Button #

Your file input is positioned absolutely over the button, but it doesn’t have explicit width and height values set. Even with font-size: 100px, it might not cover the entire button across all browsers—meaning your cursor could end up hovering over the visible button itself (instead of the input) in some areas, where no pointer cursor is defined.

Update your input CSS to force full coverage:

.upload-btn-wrapper input[type=file] {
  font-size: 100px;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%; /* Add this to match wrapper width */
  height: 100%; /* Add this to match wrapper height */
}

2. Add a Pointer Cursor Fallback to the Visible Button #

Even if the input covers everything perfectly, it’s a reliable fallback to set cursor: pointer directly on the .btn class. This ensures that no matter what edge cases pop up (like tiny gaps in input coverage), the cursor will still show as a pointer when users hover the button area:

.btn {
  border: 2px solid gray;
  color: gray;
  background-color: white;
  padding: 8px 20px;
  border-radius: 8px;
  font-size: 20px;
  font-weight: bold;
  cursor: pointer; /* Add this fallback */
}

Why This Fixes the Problem #

Adjusting z-index wasn’t solving your issue because the input was already positioned over the button—your problem wasn’t stacking order, it was input coverage and missing fallback styling. By forcing the input to fully overlap the button and adding the cursor directly to the button, you eliminate both potential causes of the missing pointer cursor.

内容的提问来源于stack exchange，提问作者Stackedup