HTML 파일 입력 요소의 스타일을 지정하는 방법은 무엇입니까?

스타일링 입력 유형="파일"

"파일" 유형의 HTML 입력 요소를 사용자 정의하려고 할 때 다음으로 인해 어려움을 겪을 수 있습니다. 브라우저 제한. 다른 양식 컨트롤과 달리 input type="file"에는 스타일 지정 기능이 제한되어 있습니다. 이러한 제한을 극복하려면 다음 기술을 활용하는 것이 좋습니다.

CSS 방법

이 접근 방식에는 CSS를 활용하여 원본 파일 입력을 숨기고 사용자 정의 "가짜" 버튼을 만드는 것이 포함됩니다. 파일 선택 대화 상자가 시작됩니다.

<code class="css">/* Hide the actual file input */
input.file {
  display: none;
}

/* Create a custom "fake" button */
.fakefile {
  position: absolute;
  top: 0;
  left: 0;
  width: 148px;
  cursor: pointer;
}

/* Style the custom button */
.fakefile input[type=button] {
  width: 100%;
  height: 100%;
}</code>

<code class="html"><!-- HTML Code -->
<div class="fileinputs">
  <input type="file" class="file" />
  <div class="fakefile">
    <input type="button" value="Select file" />
  </div>
</div></code>

사용자 정의 버튼을 클릭하면 파일 선택 대화 상자가 열리고 사용자가 파일을 선택할 수 있습니다. 선택한 파일 경로는 숨겨진 파일 입력에 할당되며 사용자 정의 버튼은 파일 선택기 인터페이스로 계속 표시됩니다.

위 내용은 HTML 파일 입력 요소의 스타일을 지정하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!