【初心者向け】HTMLとCSSでファイル入力ボタンをデザインする方法【2024年最新版】

2024-04-02

HTMLとCSSでファイル入力ボタンをスタイリングする方法

方法1：::file-selector-button 疑似クラスを使う

HTML

<input type="file" id="file-input">

CSS

#file-input::file-selector-button {
  /* ボタンのスタイル設定 */
  background-color: #000;
  color: #fff;
  border: 1px solid #ccc;
  padding: 5px 10px;
  font-size: 16px;
}

#file-input:hover::file-selector-button {
  /* ホバー時のスタイル設定 */
  background-color: #ccc;
  color: #000;
}

この方法は、すべての主要なブラウザでサポートされています。

方法2：label 要素を使う

<label for="file-input">
  <span>ファイルを選択</span>
  <input type="file" id="file-input">
</label>

label {
  /* ラベル全体のスタイル設定 */
  display: inline-block;
  cursor: pointer;
  padding: 5px 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

label span {
  /* ラベル内テキストのスタイル設定 */
  margin-right: 10px;
  font-size: 16px;
}

label:hover {
  /* ホバー時のスタイル設定 */
  background-color: #ccc;
  color: #000;
}

#file-input {
  /* ファイル入力ボタンを非表示にする */
  display: none;
}

この方法は、より自由度の高いデザインが可能ですが、一部の古いブラウザではサポートされていない場合があります。

input 要素の type 属性を file に設定することで、ファイル入力ボタンになります。
::file-selector-button 疑似クラスは、ファイル入力ボタンのスタイル設定に特化した疑似クラスです。
label 要素は、フォーム要素のラベルとして使うことができます。
display プロパティを使って、要素の表示方法を制御できます。
cursor プロパティを使って、カーソルの形状を変化させることができます。
padding プロパティを使って、要素の内側の余白を設定できます。
border プロパティを使って、要素の周りに枠線を表示することができます。
border-radius プロパティを使って、枠線の角丸を設定できます。
font-size プロパティを使って、文字の大きさを設定できます。
background-color プロパティを使って、要素の背景色を設定できます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ファイル入力ボタンのスタイリング</title>
  <style>
    #file-input::file-selector-button {
      background-color: #000;
      color: #fff;
      border: 1px solid #ccc;
      padding: 5px 10px;
      font-size: 16px;
    }

    #file-input:hover::file-selector-button {
      background-color: #ccc;
      color: #000;
    }

    /* または */

    label {
      display: inline-block;
      cursor: pointer;
      padding: 5px 10px;
      border: 1px solid #ccc;
      border-radius: 5px;
    }

    label span {
      margin-right: 10px;
      font-size: 16px;
    }

    label:hover {
      background-color: #ccc;
      color: #000;
    }

    #file-input {
      display: none;
    }
  </style>
</head>
<body>
  <h1>ファイル入力ボタンのスタイリング</h1>
  
  <input type="file" id="file-input">

  <label for="file-input">
    <span>ファイルを選択</span>
    <input type="file" id="file-input">
  </label>

</body>
</html>