Submitted Text Disappearing

You have css problem from your theme style

Correct the text color for this rule –

input[type="text"], input.text, input.title, textarea, select {
color: #000;
}

I tried making this change, but the text still disappears when I click outside of the text box. ??

@guy1347
Where did you make the correction…? I can still see the wrong color value. You need to rectify the correction on your theme style.css for the above rule that I wrote!

i made the change and tried it and it still disappeared, so I changed it back to the original value.

Here are the current CSS settings:

input[type=text],input.text, input.title, textarea, select {
color: #000;
}
input[type=text]:focus, input.text:focus, input.title:focus, textarea:focus, select:focus { border-color:#2D3940; color: #3e3e3e; }
input[type=text], input.text, input.title, textarea, select { margin:0.5em 0; }
textarea { padding: 4px; }
//input[type="text"], input.text, input.title, textarea, select {
color: #000;
}

The text is still disappearing when you click outside of the text input box.

Hi, your correction is still not visible and hence the problem remain. If you are unsure then fix the color value as color: #000 !important;

I have discovered this is not a CSS issue but a browser issue. When I use Firefox Mozilla, the text remains visible as it should, but when I use the Safari browser and certain versions of Internet Explorer, the text disappears as I have described.

Is there any way to make this work properly on all browsers?

I’m having a similar issue except my fonts don’t show up at all, probably because they’re white. I’ve tried following your instructions above to change the font color, but it did nothing.

I’ve also checked other browsers. The problem is universal.

https://www.infoprincess.com/contact

Please advise as to whether this issue has been resolved, and if so how as I am experiencing the same problem.

@trdgeorge – There is no issue to be resolved as such. All of the above comments relate to people looking to style their CF7 forms.

To change the style of your CF7 forms you would need to edit the CSS style sheets used by your WordPress theme.

See Styling Contact Form for a general explanation of styling CF7 forms using CSS. If you are not familiar with CSS, this page also includes some links to where you can learn CSS.

The most common and preferred method is to create a Child Theme and make any necessary additions to the CSS in the child themes style.css only, rather than directly in the themes styles.css. That way you don’t loose your changes when you update the theme.

Use Firebug or Chrome Dev Tools to examine the HTML and CSS of your CF7 form in detail. Once you understand how the HTML and CSS is configured in your CF7 form, you should be able to see the CSS changes you need to change the appearance of the form to suit your requirements.

Also good idea to target CSS classes & ids used within your CF7 forms only, so that your CSS changes don’t inadvertantly effect other elements on your website.

If you are uncomfortable editing CSS style sheets you may prefer to use a custom CSS plugin like My Custom CSS.

Thank You!
Downloaded My Custom CSS and worked like a dream.
Problem resolved instantly!