Simple CSS Questions

Simple CSS Questions

  
I'm using the London theme as my base and have modified the colors and text sizes and its pretty obvious for the most part.  I cannot find the setting that controls the text size in the form fields shown below.  The text size is the default until I click on the field, when the correct (smaller) text size is used.  What CSS style controls this?


Hi Curt, 

As i understood you want to increase the font size on the input field.
I don't know which class it refers to apply them all, but for solving your problem,
you can apply on extended properties of the input field i.e style "font-size: 20px" and since your text will be larger than the input field in the form, i suggest also to increase a little bit the input field also in extended properties a "padding: 0px 0px 30px 0px;"

Hope it helps

Best Regards
It's actually the other way around, the font size used when the field has focus (selected) as shown in the second image is what I want to use all the time.  The default will take up too much real estate when I get this page finished and it has many more fields.

Yes, I know I can always use extended properties but I'm creating an application that will have hundreds of fields which is why I want a template with a CSS that has everything set the way I want as this will reduce potential mistakes.  I believe I have the font-size set in my CSS, as shown below, but what am I missing when the field is NOT selected?

textarea,
select,
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"]
{ font-size: 10px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
background-color: #ffffff;
border: 1px solid #cccccc;
-webkit-box-shadow:
inset 0 1px 1px rgba(0, 0, 0, 0.075);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
vertical-align: middle;
box-sizing: border-box;
-moz-box-sizing: border-box; }
Chrome developer tools says it comes from here
.Form input.ReadOnly .Form textarea.Readonly .Form select.ReadOnly


I successfully overode it by putting this in my css at whatever level you want, and whatever size you want.
.Form input.ReadOnly
{ font-size: 10px }
I'll try that - thanks!
Worked perfectly!
This may be a more complete solution as it covers other field types as well. Cheers.

.Form input.ReadOnly,
.Form textarea.ReadOnly,
.Form select.ReadOnly {
     /* override form.css font-size values*/
    font-size: 10px;

}
as others already are saying..

use the devloper tools, it's your friend!

and use "inspect element" to access developer tools to gain more info.
(and change it runtime to see what effects it will do)