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;
}