JSFiddle - React, Tailwind, and code Playground

by kachibito

HTML

<form action="hogehoge.php" id="hogeForm" name="hogeForm">
<p class="fileinputs">
    <input type="file" class="file" size="20" id="hogeID" name="hogeName" />
    <span class="fakefile">
        <input type="text" class="fakeInput" />
        <img src="http://kachibito.net/wp-content/themes/kachi3/images/Gear.png" alt="参照..." />
    </span>
</p>
</form>

CSS

.fileinputs {
    clear: both;
    float: left;
    width: 100%;
    margin:  0 0 15px 0;
    position: relative;
}
.fakefile {
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 1;
}
input.file {
    position: relative;
    text-align: right;
    -moz-opacity:0 ;
    filter:alpha(opacity: 0);
    opacity: 0;
    z-index: 2;
    cursor: pointer;/*IEでのみ有効*/
}

JavaScript

$(function(){
    //擬似inputに参照したファイルの名前を入れる
    $("#hogeForm").find(".file")
      .change(function(){
        $('.fakefile input',$(this).parent()).val($(this).val());
      })
      .mouseover(function(){
        $fakeFileBtn = $('.fakeInput img',$(this).parent());
        $fakeFileBtn.attr("src",$fakeFileBtn.attr("src").replace(/^(.+)(\.[a-z]+)$/, "$1_on$2"))
      })
      .mouseout(function(){
        $fakeFileBtn.attr("src",$fakeFileBtn.attr("src").replace(/^(.+)_on(\.[a-z]+)$/, "$1$2"));
        })
});