input[type=file]はデフォルトで表示される文字がブラウザで決まっていたりなどデザインしにくい。

そういったときは、label要素などを使用することで、CSSでデザインしていくが、単純にdisplay: none; や visibility: hidden;を使用して非表示にするとスクリーンリーダーで読み上げられないことがある。

そういった場合には下記のようなCSSを用いる。

input[type=file] {
  position: absolute; /* clipプロパティを有効にするために使用 */
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: react(1px, 1px, 1px, 1px);
}

なんとなく知っていたけど、細かいコードの意味は知らなくてまだまだCSSでも知らないことがあるんだなあと。