Rounding text area corners & changing color of border/outline of text boxes and text area

What CSS do I need to inject to round the corners of the text area box in form # 4206673780615? What CSS do I need to inject to change the color of the border/outline of all three text boxes and the text area to #006600 in form # 4206673780615?

Thanks so much for your help

 

Peter

Hi Peter,

Please refer to this user guide -Customize-your-Form-using-Custom-CSS-Codes

At the very last part of the user guide, you will see the CSS rule to use for rounded corner

Example form:

http://www.jotform.com/form/13634042565?

Rounding Text & Drop Down Corners

 

Hope this help. Inform us if you need further assistance.

Thanks!

 

Hi Jonathan,

Thanks for your prompt reply. I tried copying and injecting your recommended code. The only effect it had was to change the background to black. I did change part of the code to #006600 because I want the text box/text area outline (border) to be 006600 green. That had no effect, either.

There are four details I need to "fix" on this form and no CSS I inject seems to make any difference. First, I need rounded corners on the text area. Second, I need the outline (border) of all the text boxes/text areas in the form to be 006600 green. Third, when you attempt to put data into the text boxes the outline/border changes to orange. I need it to change to 006600 green. Lastly, the form MUST be transparent. When I attempt change the background color to transparent by inputting 'transparent' into the color drop-down; at about  the "p" , it automatically changes to #0000 black. What do I do?

If you wish to view the form, the number is 4206673780615

Thanks for your kind assistance.

 

Peter

 

 

 

Hi Peter,

Let me create this on a cloned form of your form http://www.jotform.us/form/42066737806157

I will get back to you quickly when I have the form so you can check

Thanks.

 

Hi Peter,

Can you please check this form http://www.jotform.me/form/42068805210447  if it matches your requirement. 

You can clone the form should you want to check what I did.

Follow this user guide -How-to-Clone-an-Existing-Form-from-a-URL

These were the CSS codes I used

 

.form-textarea input,select,textarea {

border: 1px solid #006600 !important;

-webkit-border-radius: 5px;

-moz-border-radius: 5px;

border-radius: 5px;

padding:4px;

}

 

.form-textbox, .form-textarea, .form-radio-other-input, .form-checkbox-other-input, .form-captcha input {

border: 1px solid #006600;

-moz-box-shadow: 0 1px 2px #006600 inset;

-webkit-box-shadow: 0 1px 2px #006600 inset;

box-shadow: 0 1px 2px #006600 inset;

}

 

.form-line-error input:not(#coupon-input), .form-line-error textarea {

border: 1px solid #006600;

-moz-box-shadow: 0 0 3px #006600;

-webkit-box-shadow: 0 0 3px #006600;

box-shadow: 0 0 3px #006600;

}

.form-line-error .form-error-message {

display: none !important;

}

 

.form-line-error {

background: transparent !important;

color: #006600 !important;

}

or copy from here http://pastie.org/9424018

 

As for the transparent background I did it by just typing the word #Transparent in the background property of the form style. (see screen below)

 

Hope this help. Inform us if you need further assistance.

Thanks!

 

 

 

 

 

 

Jonathan,

You're fantastic! Everything works! I'll remember how you encoded "transparent" for future purposes. Could I please prevail on you for two (last) small details: (1) how can we change the asterisks back to #006600 green and, (2) how can we change "first name" and "last name" text to #006600 green. If we can make these last two details, the form would be perfect.

Thanks so much for all your help and thanks for the quick support.

 

Pete

Hi Peter,

Please check the form again http://www.jotform.me/form/42068805210447

This is the new CSS codes http://pastie.org/9424077

For the asterisk, I added this CSS code

.form-required {

color: #006600;

}

For the textbox names I added the color code in the existing code

.form-textbox, .form-textarea, .form-radio-other-input, .form-checkbox-other-input, .form-captcha input {

border: 1px solid #006600;

-moz-box-shadow: 0 1px 2px #006600 inset;

-webkit-box-shadow: 0 1px 2px #006600 inset;

box-shadow: 0 1px 2px #006600 inset;

color: #006600 !important;

}

 

Inform us if you need further assistance.

Thanks!

 

 

 

 

 

Jonathan,

We're almost there! The asterisks look great. "First name" & "Last name" are still gray. though. Any suggestions?

Thanks so much for seeing this through. I will probably have this website uploaded to the Internet tomorrow. Please feel free to visit it and see how your efforts have contributed. The URL is Ink-A-Roo.com The site is very minimalist and details make a big difference because of that. I hope I am not irritating you.

Thanks again for your help

Pete

 

 

Hi Pete,

You probably need to clear your browser's cache to see the updates.

I checked again on my browser and I can see the form http://www.jotform.me/form/42068805210447  text box have the greener text color

 

 

Please inform us if still not working.

Thanks.

 

 

Hey Jonathan,

Thanks for hanging in there. In your example, do you see the text, "First Name", the text "Last Name" and in the e-mail text box, "ex: myname@example.com" are gray? Any way we can change those to #006600 green? I opened a preview of the website with this form imbedded in it in IE and the "ex: myname@example.com" showed #006600 green but not "First Name" and "Last Name". Nothing was green in Chrome. Any suggestions?

Thanks again for all your help

Pete 

You definitely need to reset your Chrome. I just loaded the form with all in green.

Hi Jeanette,

Thanks for all your patience. That form looks magnificent! The website should be up and running on the Internet this evening after 9:00 Pacific time. If you are inclined, visit it at www.Ink-A-Roo.com and see what all your "hand holding" has produced.

Thanks again to all of the JotForm support team

Peter

 

We are glad to see that you made a form customized to fit into your requirements. Sure, we'll definitely have a look at your website once it is up and running.

Please do not hesitate to get back to us if you need any further assistance. We are happy to assist you. Thank you for using JotForm.