HTML ファイルの入力要素のスタイルを設定するには?

Styling Input Type="file"

タイプ「file」の HTML 入力要素をカスタマイズしようとすると、次のような問題が発生する可能性があります。ブラウザの制限。他のフォーム コントロールとは異なり、input type="file" のスタイル設定機能は限られています。この制限を克服するには、次の手法の利用を検討してください。

CSS メソッド

この手法では、CSS を利用して元のファイル入力を非表示にし、カスタムの「偽」ボタンを作成します。これにより、ファイル選択ダイアログがトリガーされます。

<code class="css">/* Hide the actual file input */
input.file {
  display: none;
}

/* Create a custom "fake" button */
.fakefile {
  position: absolute;
  top: 0;
  left: 0;
  width: 148px;
  cursor: pointer;
}

/* Style the custom button */
.fakefile input[type=button] {
  width: 100%;
  height: 100%;
}</code>

<code class="html"><!-- HTML Code -->
<div class="fileinputs">
  <input type="file" class="file">
  <div class="fakefile">
    <input type="button" value="Select file">
  </div>
</div></code>

カスタム ボタンをクリックすると、ファイル選択ダイアログが開き、ユーザーはファイルを選択できます。選択したファイル パスは隠しファイル入力に割り当てられますが、カスタム ボタンはファイル セレクター インターフェイスとして表示されたままになります。

以上がHTML ファイルの入力要素のスタイルを設定するには?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。