html覚書 1

inputタグのtype=fileについて、ボタンや入力欄を修飾したいことってありますよね。

大きさを変更したり、色を変更したり。

ただcssなどで直接修飾する方法が見つかりませんでしたので、ちょっと色々考えてみました。

----------------------------------------------------------------------

○html

    <input type="file" id="fileForm" 
      style="visibility:hidden;display:none;" >
    <input type="button" id="fileButton" value="select file">
    <input type="text" id="filePath" disabled>

○javascript

    $(function(){
        $('#fileButton').click(function(){
            $('#fileForm').trigger('click');
        });

        $('#fileForm').change(function(){
            $('#filePath').val($(this).val());
        });
    });

----------------------------------------------------------------------

要するに、本来のファイル選択フォームを非表示として、ダミーのボタン・ファイルパス表示部分を設置しているんですね。

ダミーボタンのクリックイベントをトリガーとして本来のファイル選択フォームを動作させ、ファイル選択完了後にファイルパス表示部分へパスを移しているという状態です。

この方法で実装すれば、ファイルのボタン部分だけ周りとフォーマットがあわない！なんて状態を解消できると思います。