html - 在文件类型输入中更改光标

Question

我有一个用于文件上传的 input 元素 (type='file')。我正在尝试在其中添加一些样式并且它几乎可以工作。将鼠标悬停在图像上时，我无法将光标更改为 pointer。它仅在光标位于图像底部时出现。

div.wrapper{
  position:relative;
	    height: 40px;
}
div.upload {position:absolute;
	    background: url('https://cdn1.iconfinder.com/data/icons/Momentum_GlossyEntireSet/32/folder_open-add.png') 0 0 no-repeat;
	}
div.upload input {
  width: 40px;
  height: 40px;
  opacity: 0;
  cursor: pointer;
}
#fileDesc{
  top:10px;
  position:relative;
  margin-left:0px;
  font-family: Trebuchet MS,Helvetica,Arial,sans-serif;		    
  font-size:18px;
  color:#3383bb;
}

<div class="wrapper">
  <div class="upload">
    <input type="file" name="upload" id="uploader"><span id="fileDesc">No file selected...</span>
  </div>
</div>
<input id="parseXml" type="button" value="Load file" onClick="parseXml()" style="vertical-align: top" />

Answer 1

下面的代码可能有帮助

   <div class="wrapper">
     <input type="file" name="photo" id="uploader-photo" />
     <label for="uploader-photo"></label>
     <label class="nostyle">No file selected...</label>
    </div>   

    label {
         cursor: pointer;
         width: 50px;
         height: 40px;
         display: inline-block;
         background: url(https://cdn1.iconfinder.com/data/icons/Momentum_GlossyEntireSet/32/folder_open-add.png) 0 0 no-repeat;
    }
    label.nostyle {
        background: none;
        height: auto;
        padding: 0;
        cursor: initial;
        width: auto;
        vertical-align: top;
    }    
    #uploader-photo {
       opacity: 0;
       position: absolute;
       z-index: -1;
    }