Buy Now
Sign in

Uppercase in form fields

gabi , September 14 at 15:56
Answered
gabi

Link to my form

How can I change to use both upper and lower cases in the form field input?

http://joomla.linedancetoender.dk/images/billeder/Support/chronoform_01.PNG

calculus00

Hello gabi,
I'm not a Chrono professional, but after checking your new post, I think that the following links may help:
How to post information from a Chronoform to ZoHo
What are the 'Easy Form' and 'Form' Wizards?
How can I add a mask to format a form input?
How can I automatically copy fields from one part of my form to another?
P.S: I'm just an automated service ;)

I'm an automated service, my answers may help, but they may not be accurate.

Gatsman

Hello Gabi
This is a CSS rule in your template's bootstrap.css file.
This is the file you need to change or create an override rule in your custom.css file.
**YOUR DOMAIN**/templates/yoo_avanti/styles/urban/css/bootstrap.css

It's in line: 7392

				select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
text-transform: uppercase;}

gabi

Hmm. Thought of something like that but I am not an expert in coding CSS.

I now did like this but its not working. I guess I did it wrong somehow.
In my custom CSS file I put this:

.uneditable-input {
/* Reset */
box-shadow: none;
/* Overrides */
height: 22px;
line-height: 22px;
color: #696862;
position: relative;
border-radius: 0;
font-family: 'Oswald', Helvetica, Arial, sans-serif;
font-size: 11px;
font-weight: inherit;
letter-spacing: 2px;
}

I simply removed the line:
text-transform: uppercase;

Can you tell me what I did wrong?

Gatsman

Hello Gabi
Removing the rule will not deactivate it, it will still be loaded from the first position.
You have to override the rule in your case you should add:

				text-transform: none;
				


* you also do not have to write all the other css rules just the one you want to change.

gabi

Just changed the code in custom CSS to this, but also not working

select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
box-shadow: none;
height: 22px;
line-height: 22px;
color: #696862;
position: relative;
border-radius: 0;
font-family: 'Oswald', Helvetica, Arial, sans-serif;
font-size: 11px;
font-weight: inherit;
letter-spacing: 2px;
}

gabi

Ahh nice. Got it.

In my custom CSS I changed the line to:
text-transform: none !important;

Thank you so much for your help

select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
box-shadow: none;
height: 22px;
line-height: 22px;
color: #696862;
position: relative;
border-radius: 0;
font-family: 'Oswald', Helvetica, Arial, sans-serif;
font-size: 11px;
font-weight: inherit;
text-transform: none !important;
letter-spacing: 2px;
}

Gatsman

What you need to add to the custom.css is the following

				select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
text-transform: none;
}


If it still does not work try it with !important but check all other fields in your site that they work like you want them to work.

				text-transform: none!important;
				

gabi

Thanks again.
As you can see above, this was the last try I did, and it worked.

I put all the rules in my Custom CSS, then I better remember and know what it means :)