::file-selector-button

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2021.

::file-selector-button は CSS の擬似要素で、<input> 要素の type="file" のボタンを表します。

試してみましょう

input {
  margin-top: 1rem;
}

input::file-selector-button {
  font-weight: bold;
  color: dodgerblue;
  padding: 0.5em;
  border: thin solid grey;
  border-radius: 3px;
}

<label for="avatar">Choose a profile picture:</label><br />

<input id="avatar" type="file" name="avatar" accept="image/png, image/jpeg" />

構文

css
selector::file-selector-button

例

基本的な例

HTML

html
<form>
  <label for="fileUpload">ファイルをアップロードしてください</label>
  <input type="file" id="fileUpload" />
</form>

CSS

css
input[type="file"]::file-selector-button {
  border: 2px solid #6c5ce7;
  padding: 0.2em 0.4em;
  border-radius: 0.2em;
  background-color: #a29bfe;
  transition: 1s;
}

input[type="file"]::file-selector-button:hover {
  background-color: #81ecec;
  border: 2px solid #00cec9;
}

結果

::file-selector-button は要素全体であり、UA スタイルシートのルールと一致することを覚えておいてください。 特に、フォントや色は必ずしも input 要素から継承されるとは限りません。

代替の例

HTML

html
<form>
  <label for="fileUpload">ファイルをアップロードしてください</label>
  <input type="file" id="fileUpload" />
</form>

CSS

css
input[type="file"]::file-selector-button {
  border: 2px solid #6c5ce7;
  padding: 0.2em 0.4em;
  border-radius: 0.2em;
  background-color: #a29bfe;
  transition: 1s;
}

input[type="file"]::-ms-browse:hover {
  background-color: #81ecec;
  border: 2px solid #00cec9;
}

input[type="file"]::-webkit-file-upload-button:hover {
  background-color: #81ecec;
  border: 2px solid #00cec9;
}

input[type="file"]::file-selector-button:hover {
  background-color: #81ecec;
  border: 2px solid #00cec9;
}

例

仕様書

Specification
CSS Pseudo-Elements Module Level 4
# file-selector-button-pseudo

ブラウザーの互換性

関連情報