CSS Problem

Resolved

(@breeze76)

Here is my CSS style coding below:

/*---- CONTACT FORM 7 CSS BEGIN ----*/
.wpcf7 {
	margin-bottom: 0px;
}

.wpcf7 p {
/*	margin-bottom: 10px;*/
}

.wpcf7 span.wpcf7-list-item {
	margin-left: 0;
	margin-right: 5px;
}

.wpcf7 input[type="text"], .wpcf7 input[type="password"], .wpcf7 textarea {
	width: 100%;
}

.wpcf7 input[type="submit"] {
    background: none repeat scroll 0 0 #111111;
    border: 0 none;
    border-radius: 5px 5px 5px 5px;
    color: #D4D4D4;
    cursor: pointer;
    font-size: 11px;
    margin: 0 5px 0 0;
    padding: 5px 10px;
    text-align: center;
    text-transform: uppercase;
}

.wpcf7 input[type="text"], .wpcf7 input[type="password"], .wpcf7 input[type="file"], .wpcf7 input[type="email"]{
	max-width: 200px;
}

.wpcf7 input[type="captchar"]{
	max-width: 100px;
}

.wpcf7 input, .wpcf7 textarea, .wpcf7 file, .wpcf7 email {
	margin-bottom: 10px;
	border:1px solid #5b5b5b;
    height: 19px;
    padding:2px 5px;
    border-radius:5px;
    font-size:12px;
}

.wpcf7 select {
	margin-bottom: 10px;
	border:1px solid #5b5b5b;
    height: 24px;
    padding:2px 5px;
    border-radius:5px;
    font-size:14px;
}
/*---- CONTACT FORM 7 CSS END ----*/

I am trying to style the captcha box and the file attachment box as well.. The captcha is is being styled like all the other fields, I am trying to make it smaller. The file attachment field is not being styled at all.

http://ww.wp.xz.cn/extend/plugins/contact-form-7/

Viewing 5 replies - 1 through 5 (of 5 total)

Plugin Author Takayuki Miyoshi
(@takayukister)

13 years ago
CAPTCHA input field has wpcf7-captchar class so you can use
```
.wpcf7 input.wpcf7-captchar {
	width: 100px;
}
```
File uploading field is input[type=file].
Thread Starter breeze76
(@breeze76)

13 years ago
Already got the CAPTCHA field:
```
.wpcf7 input[type="captchar"]{
	max-width: 100px;
}
```
It is the file one that is not working, here is my code for it:
```
.wpcf7 input[type="file"]{
	background: #ffffff;
	margin-bottom: 10px;
	border:1px solid #5b5b5b;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-khtml-border-radius: 5px;
    padding:2px 5px;
    /*border-radius:5px;*/
    font-size:12px;
	width: 200px;
}
```
Any help would be greatly appreciated..
Thread Starter breeze76
(@breeze76)

13 years ago

Got it all working now.. thanks..

jetfire
(@jetfire)

13 years ago

Where can I locate this css to edit contact 7? Is this the css of contact or css of the theme?

Moderator Jan Dembowski
(@jdembowski)

Forum Moderator and Brute Squad

13 years ago

You may get better results posting your own topic instead especially as this one is marked resolved.

http://ww.wp.xz.cn/support/plugin/contact-form-7#postform

Generally speaking CSS can be applied via your theme’s (child theme is better) style.css file or using a custom CSS plugin.

Edit: And stop replying to multiple resolved themes like that, you already got the answer.

http://ww.wp.xz.cn/support/topic/text-alongside-contact-form?replies=8#post-4223084

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘CSS Problem’ is closed to new replies.