WordPress.org

Support

Support » How-To and Troubleshooting » Contact form 7: How to style "choose file" button?

Contact form 7: How to style "choose file" button?

  • 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

Viewing 7 replies - 1 through 7 (of 7 total)
  • Fabiana

    @fabianapsimoes

    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 🙂

    ..

    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

    Fabiana

    @fabianapsimoes

    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.

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

    WPyogi

    @wpyogi

    Forum Moderator

    yeah will try. thanks!

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Contact form 7: How to style "choose file" button?’ is closed to new replies.
Skip to toolbar