How Can I Hide *Only* the Button (Not Entire Element) for the Input Type File in a Django Form? [duplicate]


Tags: python,css,django,input-type-file

Problem :

This question already has an answer here:

I just found this:

How to customize <input type="file">?

But it hides the entire input element. In my case, I'm using Django's form and there is text like "no file selected" or after you choose a file, the file name shows up. I want to keep those bits but customize only the button part of the input element.

See below for current approach.

enter image description here enter image description here

But I want something like the styled one below but that retains the text in the previous images.

enter image description here

Is there a way to do this?

EDIT

I guess I should have been clearer. I saw all the other answers out there but my question is different. First of all, I know how to add attributes to the form class. I'm already doing this. Secondly, the images I attached were from my code. In other words, I already implemented the answers in the so-called duplicates.

My question pertains to the text next to the actual button that says "Browse". I want to style the button but KEEP the text, because this text is dynamic and changes with user action.

As far as I can tell, the other answers (and my assumption) is that the entire element gets styled with the custom CSS, so when it's hidden or obscured, the text is also hidden.

Given this, can anyone propose an answer?

Solution

Thanks to @lmgonzalves, I have realized that my problem was hiding the entire element. I should have just made a button overlay with the custom button like the accepted answer. Thanks again!



Solution :

I have create a demo for you, check:

https://jsfiddle.net/lmgonzalves/uLmLc3xt/5/

The icon is with font-awesome, and here is the code.

HTML:

<label id="upload-file-container" for="photo">
    <input id="photo" type="file" name="photo"/>
    <span class="upload-file-wrapper">
        <i class="fa fa-cloud-upload"></i>
        <span>Click here to upload file</span>
    </span>
</label>

CSS:

#upload-file-container{
    position: relative;
    cursor: pointer;
}

#upload-file-container input{
    position: relative;
    left: 150px; /* Maybe you need to adjust this */
    top: 5px;
}

#upload-file-container .upload-file-wrapper{
    position: absolute;
    left: 0;
    top: -1px;
    background-color: lightgray;
    border: 1px solid gray;
    padding: 5px 0 6px;
    width: 250px;
    text-align: center;
}

    CSS Howto..

    How to find if a request is for js or css in httpHandler

    How to change html background dynamically

    li:before{ content: “■”; } How to Encode this Special Character as a Bullit in an Email Stationery?

    How do I get a zooming effect on an image when a user hovers over it? [closed]

    How to hide element label by element id in CSS?

    How to apply StyleSheet to MVC3 website?

    How to set MenuItem to corrent width in asp.net

    How to show “next”, “previous” buttons on an image (on mouseover)?

    how to make minified and readable css file in sublime text?

    Bootstrap: user agent css styles misbehaving how to solve this

    How to make div access the remaining space without using fixed height values?

    How to make my two sections vertically align, even when scaled, with different amounts of content?

    I want to override some CSS that says border:none to have border bottom. How can I do this?

    How to vertically align images inside a list

    How to change CSS for a specific page in wordpress?

    How to stop a timeOut animation that contains multiple timeOut animations within

    How To Refer To CSS Background Image in Visual Studio?

    css how to make full height div with scroll support?

    How to toggle animate with css display:none

    how to custmize font awasome icons using cheat sheet in css?

    CSS: How to align differently sized images in a line?

    How to use z-index to make an element overlap another element in CSS

    How to style html element directly (inline)?

    How do I fade in a div that has a set opacity?

    How to set vertical align middle for a div enclose another div

    How can I write CSS with jQuery (or JS) to apply to current and future matches?

    How can I hide a DIV without using CSS?

    How to change a form's CSS class without affecting FormController.$pristine?

    jQueryUI tabs mouseover a disabled link, how do I change the cursor so it doesn't appear clickable?

    How to add class based on which css class name is come in jquery