<input>タグにtype="file"を指定した場合、直接CSSによる装飾ができません。
<input>タグのtype="file"はCSSによる装飾が効かない
（ここでは便宜上、CSSではなくstyleタグを使用しています）
コード
<style>
#select-upfile {
background-color: red;
}
</style>
<input id="select-upfile" type="file">
<label>タグのfor属性を利用する
そこで、下記のように<label>タグのfor属性を利用して、<label>タグにCSSを設定すると装飾できます。
コード
<style>
.select-upfile {
background-color: #41EAD4;
border: outset;
border-radius: 8px;
color: #FDFFFC;
cursor: pointer;
padding: 4px 4px 4px 0;
}
.select-upfile input {
display:none;
}
</style>
<label class="select-upfile" for="select-upfile">
アップロードファイルを選択
<input id="select-upfile" type="file">
</label>
※<input>タグは非表示にします。
表示
