17 Replies Latest reply on Sep 8, 2015 2:55 PM by 9ecdaf359254cd3cd332630d42606cdbbd8338cd

    Form – Custom CSS Question

    Joe Reitz

      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:

       

      form-select.png

       

      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;}