「スタイルを設定する方法: デフォルトのテキストボックスを非表示にしてボタンのみを保持する?」

スタイル: ファイル入力フィールドの UI の拡張

ファイル入力要素のスタイル設定は困難な場合があります特に、すっきりとした直感的なデザインを求める場合に最適です。この質問は、デフォルトのテキスト ボックスを非表示にし、ファイル選択用のボタンのみを保持するという特定のニーズに対応します。

解決策: CSS とカスタム HTML を活用する

このスタイルを実現するには、CSS とカスタム HTML の組み合わせが使用されます。その方法は次のとおりです:

1. 位置決めされた要素を使用する:

   • 元のファイル入力要素 (

2. カスタム ボタンを作成します:

   • 「偽のファイル」要素内に「ファイルの選択」テキストを表示するための別個のボタンをカスタム要素内に作成します。

3. 元の入力を非表示にする:

   • 古いブラウザの場合は、不透明度またはフィルタを使用して、元のファイル入力の不透明度をゼロに設定します。

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><pre class="brush:php;toolbar:false"><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 中国語 Web サイトの他の関連記事を参照してください。