CSS3 および JavaScript/jQuery を使用して入力ファイル コントロールのスタイルを設定するにはどうすればよいですか?

CSS3 と JavaScript/jQuery を使用した入力ファイル コントロールのスタイル設定

入力ファイル コントロールは、その固有の機能にもかかわらず、視覚的な魅力の点で不十分なことがよくあります。 CSS3 が提供するこの要素のスタイル設定機能は限られていますが、JavaScript または jQuery を使用すると、要素の外観を強化し、デザインと一致させることができます。

CSS を使用してボタンの外観を改善する

CSS3 だけでは入力ファイル ボタンの基本的な外観を変更することはできませんが、CSS3 を使用してそのコンテナに影響を与えることはできます。たとえば、周囲を囲む div のカスタム背景色または境界線の半径を定義できます。

.input-file-container {
  background-color: #eee;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 5px;
}

スタイル付き Div を使用して参照ダイアログを開く

あるいは、視覚的に魅力的な div を作成して、をクリックすると、ファイル参照ダイアログがトリガーされます。方法は次のとおりです:

HTML
クリック可能なボタンとして機能する非表示の入力ファイル要素とスタイル付き div を作成します。

<div>
<p><strong>CSS </strong><br>div を次のようにスタイル設定します。 button.</p>
<pre class="brush:php;toolbar:false">#file-button {
  cursor: pointer;
  background-color: #000;
  color: #fff;
  padding: 5px;
  border-radius: 5px;
}

JavaScript/jQuery
イベント ハンドラーを div にバインドして、クリックされたときにファイル参照ダイアログを開きます。

$('#file-button').click(function() {
  $('#file-input').click();
});

このアプローチ入力ファイル コントロールのスタイルをより柔軟に設定でき、全体的なデザインの美しさに合わせることができます。