Re: Marketo Forms with custom CSS: border style issue

Anonymous
Not applicable

Marketo Forms with custom CSS: border style issue

We have applied custom CSS to our Marketo forms. Sometimes when we view the forms on our site, the style of the cell borders changes. First, I'll see the cell border as we intended with our custom CSS; then I'll refresh or visit another page and come back to the original one and the border is a different color/style. Sometimes the cell shape changes, too. 
 
I understand that Marketo publishes two stylesheets for their forms. One for their theme applied to the form, which one can override (within the constraints of CSS), by making edits to a second stylesheet, the custom stylesheet. In the Marketo theme, Marketo has overridden the `outline` CSS property, setting it to none. I believe this is the reason our form's cell borders change sometimes when we refresh a page. 
 
Is there a way to override Marketo's theme with our custom CSS at all times? 

Here's the CSS for one of our forms: 

.mktoForm{color: #000000; max-width: 407px;width:378px !important; 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;}
label.mktoLabel {color: #000000;}
.mktoForm .mktoRequiredField label.mktoLabel{font-weight: normal;}
.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: 64px !important; display: inline-block;}
.mktoButtonRow{display: block !important; margin-top: 8px !important;}
.mktoAsterix {display:none !important;}
.mktoForm span {float:left;}
.tophead{
  
    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 !important;
}
.mktoTextField 
{
width:278px !important;
}
.mktoEmailField
{
width:278px !important;
}
 
.mktoButton {
  color:#000!important;
  font-size:14px!important;
  min-height:33px;
  width:100%;
  border:1px solid #FAAA43!important;
  border-radius:5px;
  background-color:#FFC000!important;
  background-image:none!important;
  padding:0 10px!important;
  }
  
.mktoButton:hover {
  background-color:#fc9918!important;
}
  
.mktoButtonWrap {
  margin-left:72px!important;
  display:inline-block;
}
 
.mktoButtonRow {
  display:block!important;
  margin-top:8px!important;
}
 
span.mktoButtonWrap.mktoGlow {
float: none;
margin: 0!important;
width: 100%;
}
 
.mktoForm {
  width: 100%!important;
  float: none;
  max-width: none;
  padding: 20px 50px 30px 50px;
}
 
.mktoForm .mktoFormRow {
clear: both;
width: auto!important;
}
 
.mktoForm .mktoFormCol {
float: none;
    }
 
.mktoTextField,
.mktoEmailField{
  width: 100% !important;
  display: block;
  float: none;
}
 
.mktoForm .mktoFieldWrap {
  float: none;
  padding: 0;
}
 
.mktoButtonRow {
  margin-top: 30px!important;
}
 
.mktoForm h3 {
  padding-left: 0;
}    
 
span.mktoButtonWrap.mktoGlow {
  max-width: 170px;
  margin: 0 auto!important;
  display: block;
}
 
.mktoForm input:focus {
  outline: none;
  border: 1px solid #fc9918!important;
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
}
 
@media (min-width: 768px) {
  .mktoForm {
    max-width: 350px;
  }
}

 
David
Tags (1)
1 REPLY 1
Anonymous
Not applicable

Re: Marketo Forms with custom CSS: border style issue

Hi David,

It's difficult to tell which particular style is affecting what with the above code. However, there are ways to completely override Marketo's styles. Here are a few ways:
- Make sure that your styles come after Marketo's css
- You can use the "!important" attribute to override any style before it

If you are able to post a link to your landing page, the community can probably give you a more pointed answer.

-Erik