【CSS】<input type=”file”>のボタンを画像に変える
<input type=”file”>のボタンを画像に変えて、選択したファイルパスをテキストエリアに表示する方法。
html
<label for="fileUp1" class="fileUp"> 選択されていません。 <input type="file" name="fileUp1" id="fileUp1" onchange="uv.style.display='inline-block'; uv.value = this.value;"> <input type="text" id="uv" class="uploadValue" disabled /> </label> <input type="button" value="ファイルを削除" class="fileDel"> </div><!--/#wrapper--> <script> $(document).ready(function(){ $(".fileDel").on('click', function() { $(".fileUp input").val(''); $("#uv").hide(); }); }); </script>
scss
label.fileUp { position: relative; height: 30px; line-height: 25px; display: block; padding-left: 120px; font-size: 16px; &:before { position: absolute; top: -3px; left: 0; width: 110px; height: 30px; content: ""; background: url(img/button.png) no-repeat 0 0; background-size: cover; z-index: 2; } input[type="file"] { position: absolute; left: -9999px; } .uploadValue { display: none; background: #fff; position: absolute; top: -3px; left: 120px; width: auto; z-index: 2; width: auto; height: 30px; border: 1px solid #ccc; box-sizing: border-box; padding: 5px; } }
「ファイルを削除」ボタンクリックで、選択したファイルをキャンセルできます。
コメントを残す