Wordpress Contactform7の[ファイルを選択]の表示を消したい

Question

WordpressのConractform7の[ファイル]に関してご質問です。
添付画像のように、
input#file-upload-button箇所の表示を消したいのですが、消し方がわかりません。

--経緯--
元々ファイルを選択のボタンに色をつけたく、
そのままinputボタンに背景色をつけると、隣の[選択されていません]まで反映されるので
inputボタンに疑似クラス::beforeをつけ、ボタンを作成しました。
しかし、デフォルトの[ファイルを選択]の表示が邪魔で、ボタンとかぶったり、marginなどで調整しますが次は[選択されていません]がボタンで隠れてしまうなど、デザイン調整が難しく、非表示にしたいです。

<div class="view_box">
<span class="wpcf7-form-control-wrap upload-file">
<input type="file" name="upload-file" size="40" class="wpcf7-form-control wpcf7-file file-upload_input" id="myImage" accept=".gif,.png,.jpg,.jpeg" aria-invalid="false" /></span>
</div>

.file-upload_input {
    outline: none;
    margin-left: 18%;
      &::before {
        width: 180px;
        height: 51px;
        transition: all 0.3s;
        background-image: -webkit-gradient(
        linear,
        left top,
        right top,
        from(#F7D441),
        color-stop(50%, #BDA029),
        to(#6A5910)
        );
        background-image: -webkit-linear-gradient(left, #F7D441, #BDA029 50%, #6A5910);
        background-image: linear-gradient(90deg, #F7D441, #BDA029 50%, #6A5910);
        border-radius: 4px;
        content: 'ファイルを選択';
        font-size: 14px;
        left: 0;
        position: absolute;
        top: -12px;
        line-height: 51px;
        text-align: center;
      }
    }

試した動作

input#file-upload-button {
display:none
}

当たり前ですが、上記では消えませんでした。

どなたかわかる方いましたら、助言いただけると助かります。

Comments

[Lhankor_Mhy]

HTMLをご提示ください。

[shibaco]

肝心な情報が抜けておりました。失礼いたしました。

[Lhankor_Mhy]

#file-upload-button が含まれていないようですが、スクリーンショットは無視してかまいませんか？

[Lhankor_Mhy]

ああ、なるほど、shadow-domなのですね。理解しました。

Answer 1

こちらでいかがですか？

input[type=file]::file-selector-button,
input[type=file]::-webkit-file-upload-button {
    display: none;
}

---

参考：
::file-selector-button - CSS: Cascading Style Sheets | MDN

Comments

[shibaco]

無事に解決できました。
HTMLに#file-upload-buttonが見当たらず困っていたのですが、
::file-selector-buttonで反映されるのですね。
参考サイトまでご丁寧にありがとうございます。
助かりました。