How to access form field in html class

Question

I am building a BlogApp and I am trying to customize the FileUpload button.

What i am trying to do

I am trying to customize the File Upload button using CSS button , I am unable to access it with my model instance ( {{ form.file}} )

CSS

.btn-upload {
    position: relative;
    overflow: hidden;
    display: inline-block;
}
.btn-upload input[type=file] {
    position: absolute;
    opacity: 0;
    z-index: 0;
    max-width: 100%;
    height: 100%;
    display: block;
}
.btn-upload .btn{
    padding: 8px 20px;
    background: #337ab7;
    border: 1px solid #2e6da4;
    color: #fff;
    border: 0;
}
.btn-upload:hover .btn{
    padding: 8px 20px;
    background: #2e6da4;
    color: #fff;
    border: 0;
}

HTML

#This is my image form field in template

{{ form.file }}

What have i tried

I tried using this <input type="file" name="file" class="btn-upload"> BUT it didn't worked for me.

Any help would be really Appreciated.

Thank You in Advance.

I tried many time by adding classes and ids but none of them worked for me.

I don't how can i

where is your actual HTML? your "HTML" are CSS lines... – tacoshy Mar 19 '21 at 11:38 — tacoshy, Mar 19 '21 at 11:38
The upper is `CSS` and then `form field`. – Lars Mar 19 '21 at 11:41 — Lars, Mar 19 '21 at 11:41

score 1 · Answer 1 · answered Mar 19 '21 at 12:33

I am not sure about it, but I think the problem is that the file input type button has its own style depending on the browser you use, and it cannot be changed. One of the solutions is to put an element over the input element and modify the element above.

You will see good solutions here: Change default text in input type="file"?

Or here directly: https://www.quirksmode.org/dom/inputfile.html

I tried with your code and it could be something like that:

HTML:

<div class="btn-upload">
        <p>Upload file</p>
        <input type="file" name="file" class="hidden-btn">
</div>

CSS:

.btn-upload input[type=file] {
    position: absolute;
    opacity: 0;
    z-index: 0;
    max-width: 100%;
    height: 100%;
    display: block;
}
.btn-upload .btn{
    padding: 8px 20px;
    background: #337ab7;
    border: 1px solid #2e6da4;
    color: #fff;
    border: 0;
}
.btn-upload:hover .btn{
    padding: 8px 20px;
    background: #2e6da4;
    color: #fff;
    border: 0;
}

.hidden-btn{
    position:absolute;
    top:0px;
    left:0px;
    right:0px;
    bottom:0px;
    width:100%;
    height:100%;
    opacity: 0;
}

How to access form field in html class

1 Answers1