WordPress.org

Ready to get started?Download WordPress

Forums

Contact form 7: How to style "choose file" button? (8 posts)

  1. mm
    Member
    Posted 1 year ago #

    Hello,

    I have previously restyled the contact button which worked fine.
    But I am not sure how to style the "choose file button".

    I suppose it should look like something like this:

    /* this modifies the submit button in contact form 7*/
    .contact-submit input {
    	width: 100px;
    	height: 30px;
    	background-color: #999999;
    	font-size: 13px;
    	color: #fff;
    	border: 1px solid #fff;
    	border-radius: 7px;
    }

    But I am not sure how to name it...

    An idea?

    Thank you for having a look

  2. Fabiana Simões
    Member
    Posted 1 year ago #

    Hey there! Could you please provide a link to your site so we can see your form and its source code? This will make it easier for volunteers to help you :)

  3. mm
    Member
    Posted 1 year ago #

    ..

  4. mm
    Member
    Posted 1 year ago #

    Hi Fabiana,

    Thank you for your reply.
    My website is currently in maintenance mode so I can't really show you.
    But the contact form 7 is building forms and one of the options for building this form is to add an "attach file" button.

    So I did.
    Now I would just like to modify the way it looks.

    The code pasted above is the code I used to modify the submit button on the same form (in my own css).

    I hope this info could help you to help me.

    Thank you

  5. Fabiana Simões
    Member
    Posted 1 year ago #

    Oh, I see what you mean now. This is trickier, since the "Upload file" field uses a file input. AFAIK, styling this kind of input is always hard, since most browsers will not change the appearance of the button itself. In the past, I've seen some solutions to this using jQuery and JavaScript, but I guess this wouldn't work very well with Contact Form 7.

  6. mm
    Member
    Posted 1 year ago #

    Oh...:( That's bad news.
    So you're saying there is no solution to this problem?

  7. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

  8. mm
    Member
    Posted 1 year ago #

    yeah will try. thanks!

Topic Closed

This topic has been closed to new replies.

About this Topic