Style upload button and input field (3 posts)

  1. Tasha
    Posted 2 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.


    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.


  2. Tasha
    Posted 2 years ago #

    Anyone that can help me with this please?

  3. winnie80
    Posted 2 years 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.

Topic Closed

This topic has been closed to new replies.

About this Topic