input 찾아보기 스타일 변경 (두가지 스타일 예제)

아래 소스코드로 파일을 만들어 실행해보면 확인할 수 있습니다.

소스는 크게 CSS, HTML, JavaScript 부분으로 나뉩니다.

[ 첫번째 스타일 ]

이것은 클릭 또는 드래그&드롭 기능을 제공합니다.

test.html

<style type="text/css"> input[type="file"] {   position: absolute;   left: 0;   opacity: 0;   top: 0;   bottom: 0;   width: 100%; } div {   position: absolute;   top: 0;   bottom: 0;   width: 100%;   display: flex;   align-items: center;   justify-content: center;   background: #ccc;   border: 3px dotted #bebebe;   border-radius: 10px; } label {   display: inline-block;   position: relative;   height: 100px;   width: 400px; } div.dragover {   background-color: #aaa; } </style> <label for="test">   <div>Click or drop something here</div>   <input type="file" id="test"> </label> <p id="filename"></p> <script> var fileInput = document.querySelector('input[type=file]'); var filenameContainer = document.querySelector('#filename'); var dropzone = document.querySelector('div'); fileInput.addEventListener('change', function() { filenameContainer.innerText = fileInput.value.split('\\').pop(); }); fileInput.addEventListener('dragenter', function() { dropzone.classList.add('dragover'); }); fileInput.addEventListener('dragleave', function() { dropzone.classList.remove('dragover'); }); </script>

[출처] https://jsfiddle.net/t7w1sovq/

[ 두번째 스타일 ]

이것은 Jquery 까지 사용합니다.

test2.html

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script> <style type="text/css"> body {     background-color:Black; } div.upload {     background-color:#fff;     border: 1px solid #ddd;     border-radius:5px;     display:inline-block;     height: 30px;     padding:3px 40px 3px 3px;     position:relative;     width: auto; } div.upload:hover {     opacity:0.95; } div.upload input[type="file"] {     display: input-block;     width: 100%;     height: 30px;     opacity: 0;     cursor:pointer;     position:absolute;     left:0; } .uploadButton {     background-color: #425F9C;     border: none;     border-radius: 3px;     color: #FFF;     cursor:pointer;     display: inline-block;     height: 30px;     margin-right:15px;     width: auto;     padding:0 20px;     box-sizing: content-box; } .fileName {     font-family: Arial;     font-size:14px; } .upload + .uploadButton {     height:38px; } </style> <form action="" method="post" enctype="multipart/form-data">     <div class="upload">         <input type="button" class="uploadButton" value="Browse" />         <input type="file" name="upload" accept="image/*" id="fileUpload" />         <span class="fileName">Select file..</span>     </div>     <input type="button" class="uploadButton" value="Upload File" /> </form> <script> $('input[type=file]').change(function(e) {     $in = $(this);     $in.next().html($in.val());      }); $('.uploadButton').click(function() {     var fileName = $("#fileUpload").val();     if (fileName) {         alert(fileName + " can be uploaded.");     }     else {         alert("Please select a file to upload");     } }); </script>

[출처] http://jsfiddle.net/umhva747/