как сделать псевдоэлемент :before видимым, а основной элемент скрыть?

Пытаюсь сделать вместо стандартного поля для загрузки файла просто квадратик. Для этого использую псевдоэлемент :before. Но при установке свойства display:none основного элемента этот псевдоэлемент тоже пропадает. Как исправить?

<input type="file" class="photo">

css

.photo{
display:none;
}
.photo:before{
content:'';
width:128px;
height:110px;
border:1px dashed var(--divider-color);
border-radius: 3px;
margin:20px 40px 0 0;
display:flex;
justify-content: center;
align-items:center;
}