画像ファイルをアップロードするスペース
このようなアップロードスペースのどこをクリックしてもファイルの選択画面が開けるようにしたい。
現状、この部分をクリックした時にしか開けない。
さらに、この部分を非表示にしたい。
現在のHTML
<div class="upload-space">
<input type="file">
</div>
.upload-space {
background-color: #f5f5f5;
height: 160px;
text-align: center;
width: 620px;
border: 1px dashed #ccc;
cursor: pointer;
position: relative;
margin-top: 20px;
}
まずは、inputをdivではなくlabelで囲みます。
<label class="upload-space">
<input type="file">
</label>
そうすると高さや幅を指定しているcssが適応されなくなりました。
適応されていないプロパティは削除しておきます。
.upload-space {
background-color: #f5f5f5;
border: 1px dashed #ccc;
cursor: pointer;
}
そして、縦・横の長さを調整するために
padding: 10px 260px 150px 260px;
paddingを指定します。
いい感じですね。
次に、「ファイルを選択 選択されていません」を非表示にします。
input {
display: none;
}
非表示になりました。
これで冒頭の目的は達成されましたが、何か物足りないので
<span id="message">クリックして画像を1枚アップロードしてください。</span>
この1行をHTMLに追加します。
<label class="upload-space">
<input type="file">
<span id="message">クリックして画像を1枚アップロードしてください。</span>
</label>
位置の調整をして、
.upload-space {
background-color: #f5f5f5;
border: 1px dashed #ccc;
cursor: pointer;
padding: 10px 260px 150px 260px;
position: relative;
}
#message {
position: absolute;
top: 80px;
left: 100px;
font-size: 15px;
}
完成！
