버튼과 같은 파일 입력 필드의 스타일을 지정하는 방법: CSS 가이드
- Susan Sarandon원래의
- 2024-11-04 01:17:02608검색
"파일" 유형으로 입력 필드 스타일 지정
웹 개발 영역에서는 입력 필드의 모양을 사용자 정의하는 것이 필요한 경우가 많습니다. 기존 입력 유형으로도 충분할 수 있지만, 파일 선택기와 같은 특정 요소를 디자인하는 것은 독특한 과제를 안겨줄 수 있습니다.
보이지 않는 텍스트 상자의 수수께끼
그러한 과제 중 하나는 다음과 관련된 전통적인 텍스트 상자를 숨기는 것입니다. 파일 입력 필드. 사용자 경험을 향상하려면 버튼 전용 인터페이스가 필요한 경우가 많습니다. 이를 달성하려면 다음 CSS 중심 접근 방식을 고려하세요.
CSS 구현:
다음 스니펫은 버튼 기능을 유지하면서 텍스트 상자를 위장하는 방법을 보여줍니다.
<code class="html"><html>
<style type="text/css">
div.fileinputs {
position: relative;
}
div.fakefile {
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
}
div.fakefile input[type=button] {
cursor: pointer;
width: 148px;
}
div.fileinputs input.file {
position: relative;
text-align: right;
opacity: 0;
z-index: 2;
}
</style>
<div class="fileinputs">
<input type="file" class="file" />
<div class="fakefile">
<input type="button" value="Select file" />
</div>
</div>
</html></code>
"fakefile" 요소를 원본 텍스트 상자 위에 배치하고 입력 버튼을 전체 너비로 설정하면 버튼 스타일 파일 선택기 모양이 생성됩니다. 동시에 실제 텍스트 상자는 불투명도가 0으로 시각적으로 숨겨집니다.
위 내용은 버튼과 같은 파일 입력 필드의 스타일을 지정하는 방법: CSS 가이드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.