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

Answer 2

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

上面的这些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;
}

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

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

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

更改文件类型输入中的光标

4 个答案: