余計なDOMを追加せずにinput[type="file"]を装飾する

2024-02-13

Tech

CSS

/

HTML

::file-selector-buttonが利用することで、input[type="file"]を装飾することが出来る。

しかし::file-selector-button疑似要素は、2021 年時点で全てのモダンブラウザでサポートされたが、あまり利用されているイメージがない。

https://developer.mozilla.org/en-US/docs/Web/CSS/::file-selector-button

実装例#

次のように装飾することが出来る。

1
<div>
2
  <style>
3
    input[type="file"] {
4
      border: 2px dotted #cbd5e1;
5
      padding: 16px;
6
      background-color: #f1f5f9;
7
      border-radius: 8px;
8
      cursor: pointer;
9
      transition: 0.2s ease-out;
10
      &::file-selector-button {
11
        background-color: white;
12
        border: 1px solid #ff7f50;
13
        line-height: 24px;
14
        cursor: pointer;
15
        color: coral;
16
        font-weight: bolder;
17
        padding: 12px 16px;
18
        border-radius: 16px;
19
        margin-inline-end: 16px;
20
        transition: 0.2s ease-out;
21
      }
22
      &:hover {
23
        border-color: #a6c1e0;
24
        &::file-selector-button {
25
          color: #ff5b1f;
26
          border-color: #ff5b1f;
27
        }
28
      }
29
    }
30
  </style>
31
  <input type="file" />
32
</div>

余計な DOM を追加する手法との比較#

Pros#

File input 本来のアクセシビリティの恩恵をそのまま受けられる。
余計な DOM を追加して実装する場合、考慮するべきことが多い。
- input 要素を display: none などで隠すと、required などが効かなくなる。
- label 要素で外見を作ってしまうと、クリックイベントなどを発火出来なくなる。
- 実装に依るが input 要素自体に元々あるドラッグ&ドロップ機能を自前で実装する必要がある。

Cons#

コンテンツの位置調整が困難。
- ::file-selector-buttonと文字列を子要素のように扱えるわけではないため、input 要素を Grid や Flexbox にして位置を調整することは出来ない。position や float などのプロパティは効く。
入力要素の文章を差し替えることは出来ない。
- 無理やり消して、::beforeや::afterで挿入することは出来るが、アクセシビリティの観点からも推奨できない。