스타일 지정 방법``: 기본 텍스트 상자를 숨기고 버튼만 유지합니까?

스타일 지정 : 파일 입력 필드의 UI 향상

파일 입력 요소의 스타일을 지정하는 것이 어려울 수 있습니다. , 특히 깔끔하고 직관적인 디자인을 추구할 때 더욱 그렇습니다. 이 질문은 기본 텍스트 상자를 숨기고 파일 선택을 위한 버튼만 유지해야 하는 구체적인 필요성을 다룹니다.

해결책: CSS 및 사용자 정의 HTML 활용

이 스타일을 달성하려면 , CSS와 사용자 정의 HTML의 조합이 사용됩니다. 수행 방법은 다음과 같습니다.

1. 위치 지정된 요소 사용:

   • 원본 파일 입력 요소() 및 절대 위치 지정을 사용하는 사용자 정의 "가짜 파일".

2. 사용자 정의 버튼 만들기:

   • "가짜 파일" 요소 내의 "파일 선택" 텍스트를 표시하기 위해 사용자 정의 요소 내에 별도의 버튼을 만듭니다.

3. 원래 입력 숨기기:

   • 이전 브라우저의 불투명도 또는 필터를 사용하여 원본 파일 입력의 불투명도를 0으로 설정하세요.

4. 디스플레이 속성 조정:

   • 원래 입력의 텍스트 정렬을 오른쪽으로 설정하여 버튼이 겹칠 수 있도록 합니다.
   • 사용자 정의 버튼을 원래 입력 위에 배치합니다. z-index를 1로, 원래 입력을 2로 설정합니다.

전체 코드 예:

다음은 이를 보여주는 전체 코드입니다. 이 솔루션의 구현:

<code class="html"><div class="fileinputs">
    <input type="file" class="file">

    <div class="fakefile">
        <input type="button" value="Select File">
    </div>
</div></code>

<code class="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;
}</code>

위 내용은 스타일 지정 방법``: 기본 텍스트 상자를 숨기고 버튼만 유지합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!