0

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?

RubyRube
  • 602
  • 5
  • 24

1 Answers1

1

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;
}
tigeruppercut
  • 138
  • 8
  • Thanks TigerUpperCut, that looks doable. I will check it out and mark as correct if it works. – RubyRube Jan 12 '16 at 10:03
  • Sorry I missed this tigeruppercut. I tried it with some experienced Rubyists and it didn't seem to work. Maybe we implemented it wrong, but it didn't function immediately. I ended up switching to Elixir/Phoenix, where it works fine! Thanks anyway. – RubyRube Mar 15 '16 at 05:11