답변 5개
채택된 답변
+20 포인트
미니님a
Expert
1년 전
일단은 그냥은 안됩니다.
기본 브라우저 값으로 보이기 때문에 커스텀을 이용하셔야 합니다.
아래 움짤 참고하세요
코드는 다음과 같습니다.
</p>
<p><style></p>
<p>.file-input-wrapper {</p>
<p> position: relative;</p>
<p> overflow: hidden;</p>
<p> display: inline-block;</p>
<p> }</p>
<p> </p>
<p> .file-input-button {</p>
<p> border: 1px solid #ccc;</p>
<p> color: #333;</p>
<p> background-color: #f9f9f9;</p>
<p> padding: 5px 10px;</p>
<p> cursor: pointer;</p>
<p> }</p>
<p> </p>
<p> .file-input {</p>
<p> position: absolute;</p>
<p> top: 0;</p>
<p> right: 0;</p>
<p> margin: 0;</p>
<p> padding: 0;</p>
<p> font-size: 100px;</p>
<p> cursor: pointer;</p>
<p> opacity: 0;</p>
<p> filter: alpha(opacity=0);</p>
<p> }</p>
<p> </p>
<p> .file-name {</p>
<p> margin-left: 10px;</p>
<p> }</p>
<p> </style></p>
<p> </p>
<p><div class="file-input-wrapper"></p>
<p> <button class="file-input-button">Select File</button></p>
<p> <input type="file" class="file-input" id="file-input"></p>
<p> <span class="file-name">No file selected</span></p>
<p> </div></p>
<p> </p>
<p> <script></p>
<p> document.getElementById('file-input').addEventListener('change', function() {</p>
<p> var fileName = this.files[0] ? this.files[0].name : 'No file selected';</p>
<p> document.querySelector('.file-name').textContent = fileName;</p>
<p> });</p>
<p> </script></p>
<p>
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
1년 전
'선택한 파일없음' 해당 문구만 영문으로 변경하시길 원하시는 거라면 변경하실 필요 없습니다.
해당 문구는 OS의 기본 언어 설정에 따라 자동으로 변경됩니다.
잘 해결되시면 채택 한번 부탁드립니다^^
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인