IE requires double click with custom button

Answer 1

While @bastos.sergio is right about it happening in the text section there is a way to get around this if you are comfortable using JavaScript.

You will need:

• A wrapper div tag
• An inner dev tag
• Some sort of form input
• JQuery (tested on 2.1)

Steps:

1. Create the "wrapper" div
2. Create an inner "button " div
3. Place the form element underneath the inner "button" div
4. Set the "wrapper" and "inner" divs to the same size
5. Set overflow:hidden on the wrapper
6. Create a JQuery script for the "inner" div setting the on click function
7. In the "inner" function click function call .click() on the input

Seems to work for me in IE 10.

$(document).ready(
    function()
    {
        $("#open_dialog").on("click",function()
                                {
                                    $("input").click();
                                });
        $("input").on("change",function()
                      {
                          alert($("input"));
                          $("#notice").html("uploading");
                      });
    });

#open_dialog
{
    position: relative;
    width: 200px;
    height: 50px;
    color: white;
    font-family: "Arial";
    font-size: 14pt;
    text-align: center;
    top: 25px;
    margin-top: -.5em;
    z-index: 1;
}

#wrapper
{
    width: 200px;
    height: 50px;
    overflow: hidden;
    cursor: pointer;
    border-radius: 10px;
    background: green;
    z-index: 0;
}
input
{
  margin-top: 100px;
}

    
Click Me
    

Nothing to upload