버튼과 같은 파일 입력 필드의 스타일을 지정하는 방법: CSS 가이드-CSS 튜토리얼-php.cn

버튼과 같은 파일 입력 필드의 스타일을 지정하는 방법: CSS 가이드

Susan Sarandon

풀어 주다： 2024-11-04 01:17:02

원래의

606명이 탐색했습니다.

How To Style File Input Fields Like Buttons: A CSS Guide

"파일" 유형으로 입력 필드 스타일 지정

웹 개발 영역에서는 입력 필드의 모양을 사용자 정의하는 것이 필요한 경우가 많습니다. 기존 입력 유형으로도 충분할 수 있지만, 파일 선택기와 같은 특정 요소를 디자인하는 것은 독특한 과제를 안겨줄 수 있습니다.

보이지 않는 텍스트 상자의 수수께끼

그러한 과제 중 하나는 다음과 관련된 전통적인 텍스트 상자를 숨기는 것입니다. 파일 입력 필드. 사용자 경험을 향상하려면 버튼 전용 인터페이스가 필요한 경우가 많습니다. 이를 달성하려면 다음 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!