HTML でファイル入力ボタンをカスタマイズし、テキストボックスを非表示にする方法-CSSチュートリアル-php.cn

HTML でファイル入力ボタンをカスタマイズし、テキストボックスを非表示にする方法

Patricia Arquette

リリース： 2024-11-01 16:51:02

オリジナル

892 人が閲覧しました

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 中国語 Web サイトの他の関連記事を参照してください。