Forums

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
    Posts
  • August 6, 2013 at 9:07 am #145854
    kanshul2013
    Participant

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

    <html>
    <head>
    <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;
        filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
    }
</style>

    </head>
    <body>

    <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>
    <label class="cabinet"> 
        <input type="file" class="file" name="manifest_file_import" />
    </label>

    <input type="submit" value="Upload" class="button-style" />

</form>

    </body>
    </html>

    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

    August 6, 2013 at 9:13 am #145855
    Paulie_D
    Member

    Can you make a Codepen?

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

    August 6, 2013 at 8:42 pm #145904
    kanshul2013
    Participant

    You can find the codepen here

    http://codepen.io/anon/full/rszli

    and

    https://gist.github.com/anonymous/6170977

    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

    August 6, 2013 at 10:33 pm #145919
    sadunaresh
    Participant

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

    http://codepen.io/nareshsadu/pen/KiLjn

    August 6, 2013 at 11:43 pm #145923
    kanshul2013
    Participant

    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.

    August 7, 2013 at 2:13 am #145936
    Paulie_D
    Member

    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.

    http://stackoverflow.com/questions/572768/styling-an-input-type-file-button

    August 7, 2013 at 3:04 am #145937
    sadunaresh
    Participant

    check this out..

    http://codepen.io/nareshsadu/pen/mIBoC

    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..

    August 7, 2013 at 8:24 am #145995
    kanshul2013
    Participant

    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.

    August 7, 2013 at 8:32 am #145998
    Paulie_D
    Member

    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.

    August 7, 2013 at 9:03 pm #146079
    sadunaresh
    Participant

    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?

    August 7, 2013 at 9:29 pm #146081
    kanshul2013
    Participant

    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

    August 7, 2013 at 9:46 pm #146082
    sadunaresh
    Participant

    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="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></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) {
    //alert(“hello”);
    $(‘input[type=file]’).click(); // Open dialog
    e.preventDefault();
    });</p>

    <p>});`

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