Django form becomes invalid when position set to absolute or display set to none

I wanted my upload file button to look different so I tried these two CSS one sets display:none; when file is uploaded and other is just setting it position:absolute;

My application works perfectly without CSS. How can I solve this? Is there any other way to do it?

When the form is submitted function in my views.py form.is_valid() returns False

My First CSS :

input[type="file"] {
    opacity: 0; /* make transparent */
    z-index: -1; /* move under anything else */
    position: absolute; /* don't let it take up space */
}

input[type="file"]:focus + label {
    outline: 2px solid;  /* example focus style */
}

My Second CSS:

.image-upload > input {
    display: none;
}
    
.image-upload img {
    cursor: pointer;
}

My HTML:

<div role="button" class="post-button image-upload" style="display: inline-block;border: none;border-radius: 20px;
    margin-right: 5px;margin-left:5px;padding: 8px;">
    <label style="margin-bottom: 0;" for="id_picture">
        <img src="{% static "User/ART/Album.png" %}" alt="ProfilePic"/>
    </label>
    {{ post.content }}
    {{ post.picture }}
</div>

forms.py

    class PostForm(forms.Form):
            content = forms.CharField()
            picture = forms.ImageField()