10 Replies Latest reply on Dec 29, 2016 11:34 AM by 564f8eadacdd334b259b765c53298b2b3792fac0

    Customizing submit button width and color

      I'm wondering if anyone has experience editing a submit button to look like the attached. Can you steer me in the right direction? Thank you.

      0EM50000000T0eF
        • Re: Customizing submit button width and color
          Sanford Whiteman
          The button is actually a <button> inside a <span>.

          Anyway, you can target it using this selector.  Should have high enough selectivity to override the built-in styles.

          .mktoForm span.mktoButtonWrap.mktoSimple button[type="submit"].mktoButton

          I'm not going to do any color-matching or anything like that so here's a basic example:

          .mktoForm span.mktoButtonWrap.mktoSimple button[type="submit"].mktoButton {
            width: 240px;
            background-color: darkslateblue;
            background-image: none;
            border: none;
            height: 3em;
            font-size: 24px;
            border-radius: 4px;
          }
          • Re: Customizing submit button width and color
            John Wallace
            use

            background-color: #004FA2;

            to make the button that color
            • Re: Customizing submit button width and color
              Thanks for your response. I still can't get it to work. Not sure if I'm adding the code in the right spot. I'm attaching a screen shot of the code I added and how the button currently looks.0EM50000000T0sx
              0EM50000000T0t2
              • Re: Customizing submit button width and color
                Can the corners of all the fields be rounded to match the "Select" Box?
                • Re: Customizing submit button width and color
                  Here is all the code from all the form custom css section:

                  /* Add your custom CSS below */


                  .mktoForm span.mktoButtonWrap.mktoSimple button[type="submit"].mktoButton {
                    width: 240px;
                    background-color: #DA0000;
                    background-image: none;
                    border: none;
                    height: 3em;
                    font-size: 24px;
                    border-radius: 4px;
                  }

                  .mktoForm fieldset {
                    border:1px solid #fff;
                    color:#d9d9d9;        
                  }
                  .mktoForm fieldset legend{
                    padding:0.9em;
                  }

                  .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 select.mktoField,
                  .mktoForm textarea.mktoField{
                    -webkit-appearance: none;
                    background-color:#FFF;
                    line-height:1.8em;
                    color:#b1b1b1;
                    border:1px solid #d9d9d9;
                    border-radius:1.5;
                    padding:0.4em 0.5em;
                    min-height:1.9em;
                  }


                  .mktoForm input[type=text]:focus,
                  .mktoForm input[type=url]:focus,
                  .mktoForm input[type=email]:focus,
                  .mktoForm input[type=tel]:focus,
                  .mktoForm input[type=number]:focus,
                  .mktoForm input[type=date]:focus,
                  .mktoForm textarea.mktoField:focus,
                  .mktoForm select.mktoField:focus{
                    outline:none;
                    border-radius:0.9;
                    border:1px dashed #666666;
                  }

                  .mktoForm div.mktoLogicalField {
                    border:1px solid transparent;
                  }

                  .mktoForm input.mktoField.mktoInvalid,
                  .mktoForm select.mktoField.mktoInvalid,
                  .mktoForm textarea.mktoField.mktoInvalid,
                  .mktoForm div.mktoLogicalField.mktoInvalid{
                    border:1px solid red;
                  }

                  .mktoForm select.mktoField::-ms-expand {
                    display: none;
                  }

                  .mktoForm select.mktoField {
                    -moz-appearance: none;
                    text-indent: 0.01px;
                    text-overflow: '';
                    padding:0.2em 22px 0.2em 0.3em;
                    background:#FFF url(../images/arrow-down-bk.png) center right no-repeat;
                  }

                  .mktoForm .mktoRadioList > label,
                  .mktoForm .mktoCheckboxList > label{
                    margin-bottom:0.6em;
                    -webkit-user-select: none;
                    -khtml-user-select: none;
                    -moz-user-select: none;
                    -ms-user-select: none;
                    user-select: none;
                  }

                  .mktoForm input[type=checkbox],
                  .mktoForm input[type=radio] {
                    width:1em;
                    height:1em;
                    opacity:0;
                  }

                  .mktoForm input[type=checkbox] + label:before,
                  .mktoForm input[type=radio] + label:before
                  {
                    content: "";  
                    position:absolute;
                    width:1em;
                    height:1em;  
                    margin-left:-1.5em;
                    line-height:1em;
                    font-size:1em;
                    border:none;
                    background:#FFF;
                  }

                  .mktoForm .mktoLabelToLeft input[type=checkbox] + label:before,
                  .mktoForm .mktoLabelToLeft input[type=radio] + label:before{
                    margin-left:0;
                    right:0.3em;
                  }

                  .mktoForm input[type=checkbox]:checked + label:before,
                  .mktoForm input[type=radio]:checked + label:before {
                    text-align:center;
                    color:#000;
                  }

                  .mktoForm input[type=checkbox]:focus + label:before,
                  .mktoForm input[type=radio]:focus + label:before{
                    border:none;
                  }

                  .mktoForm input[type=checkbox] + label:before{

                  }
                  .mktoForm input[type=checkbox]:checked + label:before{
                    content:"\2713 ";
                  }

                  .mktoForm input[type=radio] + label:before{
                    border-radius:1em;
                  }
                  .mktoForm input[type=radio]:checked + label:before{
                    background-image:url(../images/dot-bk.png);
                    background-position:3px 3px;
                    background-repeat:no-repeat;
                  }

                  .mktoForm.mktoNoCheckedSupport input[type=checkbox] + label:before,
                  .mktoForm.mktoNoCheckedSupport input[type=radio] + label:before{
                    display:none;
                  }
                  .mktoForm.mktoNoCheckedSupport select.mktoField,
                  .mktoForm.ie7 select.mktoField,
                  .mktoForm.ie6 select.mktoField {
                    background-image:none;
                    padding-right:0.3em;
                  }

                  }
                  2 of 2 people found this helpful
                  • Re: Customizing submit button width and color
                    John Wallace
                    you may need to add !important to your css declaration.  so something like this

                    .mktoForm span.mktoButtonWrap.mktoSimple button[type="submit"].mktoButton {
                    background: 
                    #004FA2!important;
                    }
                    • Re: Customizing submit button width and color
                      Sanford Whiteman
                      @John W You don't need !important because

                          .mktoForm span.mktoButtonWrap.mktoSimple button[type="submit"].mktoButton

                      has higher specificity than

                         
                      .mktoForm .mktoButtonWrap.mktoSimple .mktoButton

                      @Mel P The CSS I posted is demoed here.

                      If you need advanced CSS customization I think you may have to hire a designer or at the very least post your actual URL.  Exchanging CSS snippets on this forum is really cumbersome.
                      • Re: Customizing submit button width and color
                        Thanks, for your time John

                        It is still not recognizing that code. It looks like it is pulling button styling off an internal styling sheet for the form?

                        See attached0EM50000000T0tR
                        • Re: Customizing submit button width and color
                          Any idea why the "select a country" button is the only one with rounded corners?