Style upload button and input field

  • Tasha

    (@queenv)


    11 years ago

    Morning All

    I am having problems styling my upload button and input field (the field that shows the file that will be uploaded). I have tried many solutions but nothing seems to work very well.

    http://testserver5.angelicdesign.co.uk/testing/

    At the moment I am using Contact form 7 (the auther is not getting back to me) but I have been struggling with this for so long that I am happy to use any other plug in that will allow me the style it or even a straight forward HTML and CSS form. Any help would be very much appreciated.

    Regards
    Tash

Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter Tasha

    (@queenv)

    11 years ago

    Anyone that can help me with this please?

    winnie80

    (@winnie80)

    10 years, 11 months ago

    hey tasha,
    try the following:
    1. remove the background from input[type=file], we will put the background somewhere else, which is on the span above it
    2. put extra css “text-indent: -9999px” to remove the text “browse”
    3. now add new css for span.wpcf7-form-control-wrap.upload to display background and remember always to use no-repeat for this kind of background
    4. if the position of “no file chosen” text is not centered in the background, try to add padding-top to input[type=file] for example 2px.

    if you have any other help with css, you can contact me on er_force at hotmail.com
    or if you have some side job for me as front end developer 🙂

    good luck with your site.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Style upload button and input field’ is closed to new replies.