input type="file"使用時に「ファイルを選択」ボタンを表示させない方法

これまたウェブカツ!!の課題。

画像アップロード機能を実装したが

「ファイルを選択」ボタンと「選択されていません」の文言を非表示にしたかった。

該当のHTML部分に

<input type="file" name="pic" class="input-file">

cssで

.input-file {
opacity: 0;
}

を指定したところ

表示されなくなった。

opacityは要素の透明度を指定するために使うとのこと。

ここでも役に立つとは。