Изменить курсор на вход типа файла

Question

У меня есть элемент input для загрузки файлов (type = 'file'). Я пытаюсь вставить в него какой-то стиль, и он почти работает. Я не могу изменить курсор на pointer, когда наведите курсор на изображение. Он появляется только тогда, когда курсор находится над нижней частью изображения.

div.wrapper{ 
 
    position:relative; 
 
\t  height: 40px; 
 
} 
 
div.upload {position:absolute; 
 
\t  background: url('https://cdn1.iconfinder.com/data/icons/Momentum_GlossyEntireSet/32/folder_open-add.png') 0 0 no-repeat; 
 
\t } 
 
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; \t \t  
 
    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.wrapper{ 
 
    position:relative; 
 
\t  height: 40px; 
 
} 
 
div.upload {position:absolute; 
 
\t  background: url('https://cdn1.iconfinder.com/data/icons/Momentum_GlossyEntireSet/32/folder_open-add.png') 0 0 no-repeat; 
 
\t } 
 
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; \t \t  
 
    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 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" />

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

Answer 4

Вы можете добавить следующий CSS к существующему коду. Это выполнит свою работу.

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