CODEWITHSUNDEEP
browserdefaultconflict
RubyRube
RubyRube

Reputation: 602

How can I hide a browser default picture upload button?

I'm configuring a picture upload button on a form. I have a green bootstrap button I am happy with, but Chrome still gives me a default, grey, pic upload button.

Default picture upload button

You can see the grey button underneath the green "Upload Project Picture" button.

I have searched my code, but can't find any way to hide it. My colleague (who is fairly experienced), has no idea either. Thanks if you can help.

I found this question, but am not sure if it's exactly the same issue:

How can I hide a button if JavaScript is disabled?

Upvotes: 0

Views: 56

Answers (1)

tigeruppercut
tigeruppercut

Reputation: 138

I think the best approach is to position the native element absolutely, and then move it far to the left of the viewable screen. You can then make your fancy custom submit button "be" the actual submit via javascript. Sounds hacky, but a similar solution is recommended by no less than Mozilla. 

input[type=file] {
  /* original submit tag pushed outside the viewport */
  position: absolute;
  left: -1000em;
}

Upvotes: 1

Related Questions