Hi all,
This is probably going to seem like a fairly obvious question to anyone with more CSS experience... Essentially, I'm wondering if there is a general CSS class I can use with Marketo that makes all my picklists look the same. Currently, my form looks like this:
I want that second drop down to look like the first. I've tried just using "Select" as a CSS parameter, but that doesn't seem to change anything. What I've found in working with Marketo forms is that the CSS seems to be tied to the Field Value. For example, Industry is a mapped field from SFDC into Marketo, while the Sub-Industry field, Industry (L), is not. I believe that's the reason the second drop-down styling doesn't look like the first.
One last side note: this is a progressive form. I'm not sure if that could be affecting anything... the idea is that if the user selects "Healthcare," the "sub-industry" field pops up. We do this so we can gain more information for our database and learn what type of facility they have (i.e., hospital, outpatient facility, assisted care/senior living, etc.) so we can ultimately plug them into the right engagement program.
***
Here is the current CSS if it helps:
***
input{margin-bottom:5px !important}
#FirstName{
width:280px !important;
height:30px;
padding:2px 0px 2px 10px !important;
background-position:5px 5px;
border: 1px solid #dedede;
background-color: #ffffff;
border-radius: 5px;
}
input:-webkit-autofill, input:-webkit-autofill:focus {
-webkit-box-shadow: 0 0 0px 1000px white inset;
}
#Company{
width:280px !important;
height:30px;
padding:2px 0px 2px 10px !important;
background-position:5px 5px;
border: 1px solid #dedede;
background-color: #ffffff;
border-radius: 5px;
}
#PostalCode{
width:280px !important;
height:30px;
padding:2px 0px 2px 10px !important;
background-position:5px 5px;
border: 1px solid #dedede;
background-color: #ffffff;
border-radius: 5px;
}
#LastName{
width:280px !important;
height:30px;
padding:2px 0px 2px 10px !important;
background-position:5px 5px;
border: 1px solid #dedede;
background-color: #ffffff;
border-radius: 5px;
}
#Title{
width:280px !important;
height:30px;
padding:2px 0px 2px 10px !important;
background-position:5px 5px;
border: 1px solid #dedede;
background-color: #ffffff;
border-radius: 5px;
}
#Email{
width:280px !important;
height:30px;
padding:2px 0px 2px 10px !important;
background-position:5px 5px;
border: 1px solid #dedede;
background-color: #ffffff;
border-radius: 5px;
}
#Phone{
width:280px !important;
height:30px;
padding:2px 0px 2px 10px !important;
background-position:5px 5px;
border: 1px solid #dedede;
background-color: #ffffff;
border-radius: 5px;
}
#Select{
width:280px !important;
height:30px;
padding:2px 0px 2px 10px !important;
background-position:5px 5px;
border: 1px solid #dedede;
background-color: #ffffff;
border-radius: 5px;
}
#City{
width:280px !important;
height:30px;
padding:2px 0px 2px 10px !important;
background-position:5px 5px;
border: 1px solid #dedede;
background-color: #ffffff;
border-radius: 5px;
}
#Address{
width:280px !important;
height:30px;
padding:2px 0px 2px 10px !important;
background-position:5px 5px;
border: 1px solid #dedede;
background-color: #ffffff;
border-radius: 5px;
}
#Country{
width:280px !important;
height:30px;
padding:2px 0px 2px 10px !important;
background-position:5px 5px;
border: 1px solid #dedede;
background-color: #ffffff;
border-radius: 5px;
}
#State{
width:280px !important;
height:30px;
padding:2px 0px 2px 10px !important;
background-position:5px 5px;
border: 1px solid #dedede;
background-color: #ffffff;
border-radius: 5px;
}
#SystemType{
width:280px !important;
height:30px;
padding:2px 0px 2px 10px !important;
background-position:5px 5px;
border: 1px solid #dedede;
background-color: #ffffff;
border-radius: 5px;
}
#LeadSource{
width:280px !important;
height:30px;
padding:2px 0px 2px 10px !important;
background-position:5px 5px;
border: 1px solid #dedede;
background-color: #ffffff;
border-radius: 5px;
}
#referringSource{
width:280px !important;
height:30px;
padding:2px 0px 2px 10px !important;
background-position:5px 5px;
border: 1px solid #dedede;
background-color: #ffffff;
border-radius: 5px;
}
#Industry{
width:280px !important;
height:30px;
padding:2px 0px 2px 10px !important;
background-position:5px 5px;
border: 1px solid #dedede;
background-color: #ffffff;
border-radius: 5px;
}
#CompanyType{
width:280px !important;
height:30px;
padding:2px 0px 2px 10px !important;
background-position:5px 5px;
border: 1px solid #dedede;
background-color: #ffffff;
border-radius: 5px;
}
#CurrentFormComments{
width:480px !important;
height:150px;
padding:2px 0px 2px 10px !important;
background-position:5px 5px;
border: 1px solid #dedede;
background-color: #ffffff;
border-radius: 5px;
}
button{
background-color:#0098c3; width:240px;
}
button:hover{
background-color:#2faeff !important;
}
.mktoButton{align:right;width:240px;background-color:#0098c3 ;background-image:none !important;text-shadow:1px 1px #000000 !important;font-size:14px !important;}
.mktoButtonRow > span{margin-left:10px;}
::-webkit-input-placeholder {
color: #c5c5c5;
font-size:16px;
}
:-moz-placeholder {
color: #c5c5c5;
font-size:16px;
}
::-moz-placeholder {
color: #c5c5c5;
font-size:16px;
}
::-ms-input-placeholder {
color: #c5c5c5;
font-size:16px;
}
:-ms-input-placeholder{
color: #c5c5c5;
font-size:16px;
}
.placeholder{top:10px !important;font-size:16px !important;}
.mktoForm input[type=“text”], .mktoForm input[type=“url”], .mktoForm input[type=“email”], .mktoForm input[type=“tel”], .mktoForm input[type=“number”], .mktoForm input[type=“date”], .mktoForm textarea.mktoField, .mktoForm select.mktoField {
padding: 2px 17px;
}
.mktoAsterix{visibility:hidden !important;}
.mktoOffset{width:10px !important;}
You should to explain what you expect a little more, and what browsers you're using to test.
Here's Chrome 40 with your original CSS:
And with the adjusted CSS:
You need to explain how that isn't what you described!
Oh wow - that looks great! That is exactly what I want. It doesn't look like that on my computer. Here is my updated CSS on Chrome 44 (on a Mac):
So your version above looks GREAT! I'll just need to look again at why mine isn't appearing like that.
.png)