akiyum
4/6/2016 - 9:57 AM

input[type=“file”]のデザインを調整

input[type=“file”]のデザインを調整

【jsで無理やりごにょごにょ編】No.14 input[type=“file”]要素をデザインするワザ
https://schoo.jp/design/article/94
$('.fileArea').on('change',function(){
    var $this = $(this),
        $fileText = $this.find('.file-text');
    var fileValue = $this.find('.file-input').val();

    //実体が変更されたら、テキストフィールドに値をいれる
    if(fileValue === '') {
      $fileText.html('選択されていません');
    } else {
  	  $fileText.html(fileValue);
    }
});
<div class="fileArea"><label for="fileAttachment01">
  <input id="fileAttachment01" name="item_image_05_01" type="file" class="file-input" value="">
  <div class="file-button">ファイルを選択</div>
  <div class="file-text">選択されていません</div>
</div></li>
#formArea td .fileArea{
    position:relative;
    overflow:hidden;
    margin-bottom: 8px;
}
#formArea td .file-input {
    position:absolute;
    top:0;
    left:0;
    z-index:10;
    width:100%;
    height:100%;
    opacity:0;
    cursor:pointer;
}
#formArea td .file-button {
    display: inline-block;
    width: 128px;
    height: 28px;
    line-height: 28px;
    text-align: center;
    font-size: 12px;
    margin-right: 10px;
    border: 1px solid rgb(164, 164, 164);
    border-radius: 3px;
    background-image: -moz-linear-gradient( 90deg, rgb(224,223,222) 0%, rgb(255,255,255) 100%);
    background-image: -webkit-linear-gradient( 90deg, rgb(224,223,222) 0%, rgb(255,255,255) 100%);
    background-image: -ms-linear-gradient( 90deg, rgb(224,223,222) 0%, rgb(255,255,255) 100%);
    box-shadow: inset 0px -1px 3px 0px rgba(4, 0, 0, 0.5);
    cursor: pointer;
}
#formArea td .file-text {
    display: inline-block;
    cursor: pointer;
}