How do I style input type=file?

Discussion in 'HTML & Website Design' started by math20, Oct 15, 2006.

  1. #1
    I want to make it so the usual text box followed by a "browse" button replaced by just an image, is this possible?

    Thanks!
     
    math20, Oct 15, 2006 IP
  2. Morishani

    Morishani Peon

    Messages:
    239
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    0
    #2
    It is possible with javascript http://www.quirksmode.org/dom/inputfile.html
     
    Morishani, Oct 15, 2006 IP
  3. math20

    math20 Peon

    Messages:
    1,562
    Likes Received:
    33
    Best Answers:
    0
    Trophy Points:
    0
    #3
    I saw that but it doesn't quite answer my question; I need to completely get rid of the text box.
     
    math20, Oct 15, 2006 IP
  4. Morishani

    Morishani Peon

    Messages:
    239
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    0
    #4
    it is get's rid of the text box, just add a little bit of css to the second textbox - display:none;
     
    Morishani, Oct 15, 2006 IP
  5. math20

    math20 Peon

    Messages:
    1,562
    Likes Received:
    33
    Best Answers:
    0
    Trophy Points:
    0
    #5
    I don't quite follow you, can you show it to me by quoting the code? (rep will be added if it works)
     
    math20, Oct 15, 2006 IP
  6. Morishani

    Morishani Peon

    Messages:
    239
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Just add this css code to the example here :
    http://www.quirksmode.org/dom/inputfile.html

    CSS Code :
    div.fakefile input { display:none; }
    
    Code (markup):
     
    Morishani, Oct 15, 2006 IP
  7. math20

    math20 Peon

    Messages:
    1,562
    Likes Received:
    33
    Best Answers:
    0
    Trophy Points:
    0
    #7
    That makes it show up right but it does not work when I click the image.
     
    math20, Oct 15, 2006 IP
  8. Morishani

    Morishani Peon

    Messages:
    239
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    0
    #8
    Let me understand you, you want only "Browse" image without any text box?
    If it is, i'll make for you the script.
     
    Morishani, Oct 15, 2006 IP
  9. math20

    math20 Peon

    Messages:
    1,562
    Likes Received:
    33
    Best Answers:
    0
    Trophy Points:
    0
    #9
    Yes, that would be great! Thank you
     
    math20, Oct 15, 2006 IP