How to set ‘cursor:pointer’ to html File Upload input

file upload input - set cursor pointer

It is not an easy job to customize standard HTML elements, such as file-upload. The problem of <input type=”file”> is a complicated way of setting the cursor style (pointer, etc.)

Apply the pointer cursor to file upload

The file-upload customization goes like this:

  • make standard imput element invisible
  • create the custom dummy-button
  • place the imput above the created button

The problem is that the default input with type=”file” has an arrow cursor which is impossible to change.

The next image shows how to position elements to allow the pointer cursor being shown above the file-upload button.

file upload pointer cursor

Let’s look how to make the pointer cursor for the file-upload in HTML:

<span class="file-wrapper">
  <input type="file" name="photo" id="photo" />
  <div class="button">Upload</div>
</span>

Here you can see both input and dummy-button (div).

Now let’s apply proper styles:

.file-wrapper input {
  margin: 10px;
  width:100px;
  height:40px;
  cursor: pointer;
  font-size: 1px;
  filter: alpha(opacity=1);
  -moz-opacity: 0;
  opacity: 0;
  position: absolute;
  left: 0;
  top: -10px;
}
.file-wrapper .button {
  margin: 10px;
  width:100px;
  height:30px;
  background: coral;
  text-align: center;
  cursor: pointer;
  display: inline-block;
}

Afterall, this code creates a working file-upload input element with a pointer cursor.

You can find another approaches in the web. The most popular one is to make invisible input very wide, so the “blind” zone goes left, and button’s cursor style starts working.

My approach moves this blind zone upper, which is suitable for Selenium UI acceptance testing.

 

 

 

Leave a Reply

Be the First to Comment!