Unable to click button with selenium webdriver using C#

Question

I am having trouble with clicking a button within a modal using Selenium and C#.

The button is for a photo upload, and for some reason the element that is select-able (tested with JS in the console) is set to display:none and hidden behind a button. Because it is set to display:none, Selenium WebDriver appears to not be able to "see" it.

Right now it is not feasible to change the markup, but I would really like to be able to complete this test. I was hoping someone had a workaround that they could share? Here is the markup:

<div id="uploadPhoto">
<div id="uploadifive-file_upload" class="uploadifive-button btn" style="height: 30px; line-height: 30px; overflow: hidden; position: relative; text-align: center; width: 100px;">
<i class="icon-plus"></i>Upload Photo<input id="file_upload" name="file_upload" style="display: none;" type="file">
<input style="font-size: 30px; opacity: 0; position: absolute; right: -3px; top: -3px; z-index: 999;" accept="image/*" type="file"></div>
<div id="uploadifive-file_upload-queue" class="uploadifive-queue"></div>
</div>

Answer 1

Well, actually I strongly not recommend to use the solution posted below unless you have clear understanding of what you're doing and why you do really need this since injecting changes into the actual page might decrease the quality of your tests:

1. Check this post to learn how to run JavaScript against the pages using Selenium in C#.
2. Check this post to learn how to change element style using JavaScript.
3. Combine the knowledge you have got from the previous 2 steps.

Disclaimer: Having the element visible does not necessarily make it interactable since normally the action bound to the element is defined in some JavaScript function that is the part of the page. That function might block interaction depending on some other flags except just an element's style.