HTML ファイルの入力要素のスタイルを設定するには?-CSSチュートリアル-php.cn

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

Barbara Streisand

リリース： 2024-11-01 01:44:28

オリジナル

592 人が閲覧しました

How to Style HTML File Input Elements?

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