The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Style input type file

  • This topic is empty.
Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
  • #145854

    I need to style <input type=”file”>. Below is the code that I am using –

    <style><br />
    label.cabinet {
    width: 79px;
    height: 22px;
    background: url(btn-choose-file.png) 0 0 no-repeat;
    display: block;
    overflow: hidden;
    cursor: pointer;

        label.cabinet input.file {
            position: relative;
            height: 100%;
            width: auto;
            opacity: 0;
            -moz-opacity: 0;


    <div class="label-style">Please select the documents to import : </div> 
    <form name="import_form" action='<%= request.getParameter("bps_url") %>/http/upload_archive' method="post" enctype="multipart/form-data">
        <label class="cabinet"> 
            <input type="file" class="file" name="zip_file_import" />
        <label class="cabinet"> 
            <input type="file" class="file" name="manifest_file_import" />
        <input type="submit" value="Upload" class="button-style" />


    the problem with this code is that once the file is selected, filename is not displayed to the user (like it happens for default file selector button).

    Is there a way to show the filename after the file is selected by the user?

    Thank you


    Can you make a Codepen?

    It’s hard to comment without seeing the problem in action.


    You can find the codepen here


    If you just click the empty space below ‘Please’, a Windows selector would pop up. You see empty space as it is an image where user is supposed to click and I could not find a way to upload image to codepen.

    The problem is that once user selects the file, filename is not displayed on the screen so user thinks nothing was selected and tries to do the operation again. Is there a way to show the filename after file selection has been made (just like with default html <input type=”file” > ) .

    Thank you


    Please see the code at below link and now let us how you need the controls to be styled..


    Thanks sadunaresh.

    What I need is to display a link in place of a button. Since I could not get a link, I created an image of the link and specified the same in the CSS. So now users clicks on the image (thinking it’s a link) and then the file select dialog opens. The only problem here is that after user has selects the file, filename is not displayed on the screen.

    If there is a way to style the button to look like a link (without doing the image trick I mentioned above) then it is even better.


    Pretty sure that this is going to be a tough one without a JS hide/replace option.

    It does seem that the input[type=file] has some distinct built in styles and they are hard to override.


    check this out..

    hope this is what you are expecting.. had to use bit of jquery…

    you can style the link with what ever image or background you need..


    Hi sadunaresh

    Thanks for the code. I need to display the link like you did but also need to hide the button. There is no point showing the user both button and link at the same time. So, essentially the link replaces the button.


    Basically, I don’t think you can’t hide the** JUST** button if you use the ‘file’ type input with CSS etc.

    You have to hide the whole input and replace the parts with something else…as I mentioned before.


    I need to display the link like you did but also need to hide the button.

    do you see the “BROWSE” button there? I have hidden it by wrapping it in a div and hiding the overflow…

    just in place of “Browse” button… the link appears…

    are you talking about UPLOAD button?


    My apologies, last time I visited the link I saw the ‘Browse’ button. May be I clicked on the wrong link then and visited an older version of the page.

    You are right this is exactly what I need. Since you are using JQuery, do I need to include any jars etc in my project to make it work?

    Thank you


    no need of jars… jquery is just client side scripting…

    make sure you include jquery .js (jquery library) either by using CDN(content delivery network) as below

    <script src=""></script>

    or download it and link it in your document..

    and include following code for your specific requirement…

    `$(document).ready(function() {
    $(“.link”).click(function (e) {
    $(‘input[type=file]’).click(); // Open dialog


Viewing 12 posts - 1 through 12 (of 12 total)
  • The forum ‘CSS’ is closed to new topics and replies.