Text not legible in text area

Dear Jason,

I created a simple contact form with CSS Form Builder using the 'sharp' design - see attached zip.

I made one change to the form in CSS Form Builder before it was processed, and that was to make the 'comments text area field' a 'required' field.

This has had a strange effect. Firstly if a user just hits the submit button, all the validation tooltips appear (expected). However, the comments box has taken on a red colour, the other text boxes are a 'salmon pink' colour. That's not too bad, but the main problem - after you hit the submit button and it contains no comment - is you cannot see the text when you do go to type text in the comments box. You only see the text when you click out of the box - so the user doesn't realise that he is typing anything and this obviously would cause the user problems.

this is a css issue with the Spry Text field.

see the following for details on the various css styles associated with the spry text field:
WSC0A9CA2A-E807-441a-ACC2-7B5E7A503C74a.html

if you need more assistance, i will need a link where i can see the problem.

Jason, you'll see the problem in the zip I sent. It's the simple contact form that was created in CSS Form Builder.

I edited one field in CSS Form Builder - I just made the 'comments text area' a required field - that's all I did, CSS Form Builder did the rest - the result is in the zipped file.

the zip contains only the form without any of the supporting css, using this file, i cannot troubleshoot.

I need a link to your comments page on your website to see the problem in the browser.

ol, let me upload it for you.

In the meantime, here is the actual file with the WebAssist folder containing the CSS, and all the other WebAssist material used to create the comments page.

Ok Jason, I've uploaded the file to view in the browser


Just hit submit, and then try and type some test in the comments field - you can't see what you are typing.

in the webassist/forms/fd_sharp_default.css file, the following style is setting the color for the failed text area to white:

form.Sharp_Default textarea.textareaRequiredState, form.Sharp_Default .textareaRequiredState textarea, form.Sharp_Default textarea.textareaMinCharsState, form.Sharp_Default .textareaMinCharsState textarea, form.Sharp_Default textarea.textareaMaxCharsState, form.Sharp_Default .textareaMaxCharsState textarea {
    background-color: #B40000;
    border-color: #8C8C8C;
    color: #FFFFFF;
}

you can change that to black by changing the css to:

form.Sharp_Default textarea.textareaRequiredState, form.Sharp_Default .textareaRequiredState textarea, form.Sharp_Default textarea.textareaMinCharsState, form.Sharp_Default .textareaMinCharsState textarea, form.Sharp_Default textarea.textareaMaxCharsState, form.Sharp_Default .textareaMaxCharsState textarea {
    background-color: #B40000;
    border-color: #8C8C8C;
    color: #000000;
}

Jason, is this a bug in Form Builder or did should I have done something different? In other words, if I change something to require in Form Builder, will I have to do this code adjustment each time - again it's no big deal, but would be nice to know.

in form builder, edit the design.

from the initial select list, click form elements, then select Text Area.

in the state section, select the invalid state to edit the font color that is used.