스타일링 입력 유형="파일"
"파일" 유형의 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!