How to modify field label text color in custom CSS in Marketo Forms

[Anonymous]

We've built custom CSS to stylize our Marketo forms. The custom CSS for one of them is attached below. It looks like the fields are coded to appear in black but they're appearing in dark grey.

Does anyone out there have CSS knowledge who can help me troubleshoot? We want the fields to display in black. 

.mktoForm{color: #000000;width:378px !important; max-width: 407px; float:right; line-height: 34px; background: none repeat scroll 0% 0% #F0F0F0; padding: 10px 50px 20px 50px;

border-radius: 5px;font-family: 'Open Sans', sans-serif !important;}

.mktoLabel {padding: 0 0 12px 0 !important; width: 109px !important;}

.mktoField{color: #000000; font-size: 14px !important; min-height: 33px; padding: 0px 0px 0px 5px !important; width: 100% !important; border: 1px solid #FAAA43; border-radius: 5px;}

.mktoOffset{width:0px !important; display:none !important;}

.mktoForm .mktoGutter{height:auto !important;}

.mktoForm .mktoFieldWrap{padding: 11px 0 0px 0;}

.mktoError{left:0px !important;}

.mktoButton{color: #000000 !important; font-size: 14px !important; min-height: 33px; padding: 0px 10px 0px 10px !important; width: 100%; border: 1px solid #FAAA43 !important; border-radius: 5px; background-color: #FFC000 !important; background-image: none !important;}

.mktoButton:hover{background-color: #fc9918 !important;}

.mktoButtonWrap{margin-left: 72px !important; display: inline-block;}

.mktoButtonRow{display: block !important; margin-top: 8px !important;}

.mktoAsterix {display:none !important;}

.mktoForm span {float:left;}

.tophed{

    float: left;

margin-top: -2px;

margin-bottom: 0px;

}

.lastlab{float: left;

margin-top: -9px !important; 

  font-size: 13px !important;

}

.mktoForm * {

font-family: 'Open Sans', sans-serif !important;

}

.mktoFormRow{

  width:250px;

}

.mktoTextField 

{

width:278px !important;

}

.mktoEmailField

{

width:278px !important;

}

Thanks,

David

[Anonymous]

I don't see that you have the background color for the fields set anywhere. So in the class that deals with fields (.mktoField) you should include the following    background-color:#000000;  then they should come up as black.

[Anonymous]

Can you post the URL of a page where this is located? Maybe some overriding styles somewhere? Happy to help...

[Anonymous]

Shannan: I'm not trying to change the background color. I'm trying to change the text color. Does that help?

Jason: here's the URL for our test site where I've embedded the form  http://ww1.casthighlight.com/    The fields above the cells are appearing in a dark grey. Subtle difference. 

Thanks,
David

[Anonymous]

Looks like adding this code will help:

label.mktoLabel {

color: #000000;

}

You have a global form style that is applying a color to everything without a specific declaration; this adds one for labels.

[Anonymous]

Thank you for the clarification. I thought the field background color was the objective. Jason's code should work for your needs.

[Anonymous]

Thanks Jason. It worked!

[Anonymous]

A related question for ya: If I wanted to change the field labels above the cells from bold to regular weight, how would I make that change in the CSS? Ie. First Name: Last Name: etc.

[Anonymous]

Now that I look at the form more closely, it appears the font used in the field labels doesn't match the font used on our website, which is Open Sans. We coded the CSS for Open Sans, but I don't think the text in the form is rendering with this font. Any ideas? Sorry for so many questions. 

[Anonymous]

Looks like it does in my browser...did you get this fixed?