在文件类型输入中更改光标答案

【问题标题】：Change cursor in file type input在文件类型输入中更改光标
【发布时间】：2017-06-23 06:55:21
【问题描述】：

我有一个用于文件上传的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" />

【问题讨论】：

这个jsfiddle.net/detst0kc 呢？？？
我的问题可能不清楚，我希望文件夹的图像有一个指针光标。在我的代码中它确实如此，但（出于未知原因）仅在图像的下半部分。

标签： html css html-input

【解决方案1】：

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;
}
div.upload {
  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" />

【讨论】：

光标悬停在图像上时不会变为指针。

【解决方案2】：

以上这些 css 更改使标签也可点击。

div.upload input {
    width: 40px;
    height: 40px;
    opacity: 0;
    cursor: pointer;
    padding-right: 200px;

}

#fileDesc {
    top: 10px;
    position: absolute;
    margin-left: 0px;
    font-family: Trebuchet MS,Helvetica,Arial,sans-serif;
    font-size: 18px;
    color: #3383bb;
    left: 50px;
    z-index: -1;
}

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;
  padding-right: 200px;
}
#fileDesc {
  top: 10px;
  position: absolute;
  margin-left: 0px;
  font-family: Trebuchet MS, Helvetica, Arial, sans-serif;
  font-size: 18px;
  color: #3383bb;
  left: 50px;
  z-index: -1;
}

<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" />

【讨论】：

不过，当鼠标悬停在图像的上半部分时，光标并没有变成指针，这就是问题所在。

【解决方案3】：

下面的代码可能会有所帮助

   <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;
    }

【讨论】：

是的，这无疑将我推向了正确的方向。

【解决方案4】：

您可以将以下 css 添加到现有代码中。这将完成工作。

div.upload input {
cursor: pointer;
margin-left: -100px;}

【讨论】：