파일 입력 버튼을 사용자 정의하고 HTML에서 텍스트 상자를 숨기는 방법은 무엇입니까?-CSS 튜토리얼-php.cn

파일 입력 버튼을 사용자 정의하고 HTML에서 텍스트 상자를 숨기는 방법은 무엇입니까?

Patricia Arquette

풀어 주다： 2024-11-01 16:51:02

원래의

820명이 탐색했습니다.

How to Customize the File Input Button and Hide the Textbox in HTML?

스타일 지정 방법 텍스트 상자를 숨기고 버튼만 표시하려면

특히 텍스트 상자를 숨기고 버튼만 표시하려고 할 때 어려울 수 있습니다.

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] {
            /* enough width to completely overlap the real hidden file control */
            cursor: pointer;
            width: 148px;
        }

        div.fileinputs input.file {
            position: relative;
            text-align: right;
            -moz-opacity:0 ;
            filter:alpha(opacity: 0);
            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>

로그인 후 복사

이 CSS 코드는 실제 파일 입력과 겹치는 가짜 파일 버튼을 생성하고 불투명도: 0;을 사용하여 텍스트 상자를 숨깁니다.

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