Пользовательская кнопка загрузки HTML с курсором в виде руки при наведении курсора?

Следуя трюку со стилем CSS из этого вопроса, я смог создать пользовательскую кнопку загрузки. Теперь задача состоит в том, чтобы заставить всю часть кнопки изменить значок указателя мыши на значок руки.

Как я этого частично добился, можно увидеть здесь (jSFiddle). Как видите, курсор выглядит как рука только при наведении на правую часть кнопки (у меня последняя версия firefox).

CSS (также на jSFiddle)

 
    
     Select Documents
 

CSS (также на jSFiddle)

#uploadMask {
  width:160px;
  display: block;
  float:left;
  overflow: hidden;
  height:32px;
  margin-right: 5px;
  position: relative;
}

#uploadMask input {
  position: absolute;
  top:0;
  bottom: 0;
  right:0;
  opacity: 0;
  z-index: 2;
  cursor: pointer;
}

#uploadMask .button {
  background:#ccc;
  line-height:24px;
  padding:5px 15px;
  display:block;
}

Есть идеи?

7
задан Community 23 May 2017 в 11:48
поделиться