7 Replies Latest reply on Apr 4, 2018 4:51 AM by Dave Roberts

    CSS-Required Asterisk Position

    Douglas Welcome

      I am having a **** of a time trying to position the required asterisk. I used some css styling to redo the generic boring checkboxes, but now that little guy just floats above. I also scrubbed all the pre-filled marketo css per Sanford Whiteman .

       

      Anyone have a trick for this?

       

      Here's the page:

      test

        • Re: CSS-Required Asterisk Position
          Grégoire Michel

          Hi Douglas,

          This is because you are using chekboxes without a label, yet the * is attached to the label.

           

          Just hide them with CSS and recreate them in the checkboxes display value where you can add some html/css:

          <span style="color:red;">*</span>I agree to sell you my soul in exchange for a nickel and two chickens.

          But remember that under GDPR (and most of equivalent opt-in regulations), you should not make the consent mandatory.

           

          -Greg

            • Re: CSS-Required Asterisk Position
              Douglas Welcome

              Thanks Grégoire. Super helpful.

                • Re: CSS-Required Asterisk Position
                  Grégoire Michel

                  Hi Douglas,

                   

                  Pls mark the answer as correct for future reference.

                   

                  -Greg

                    • Re: CSS-Required Asterisk Position
                      Douglas Welcome

                      Ok, follow up question, how do I target those specific asterisks? Trying to avoid using nth child to target those two labels.

                       

                      Larger question as this is my first time using Marketo forms (and would solve my problem), can you assign css id to elements to target them in the form editor in the design studio? if I could give them a class or ID I could easily hide them in my CSS

                        • Re: CSS-Required Asterisk Position
                          Douglas Welcome

                          Found a solution:

                           

                          label[for="something"] {
                            
                          /* woohoo! */

                          }

                           

                          allows you to target specific labels. But still would love to hear your thoughts.

                          • Re: CSS-Required Asterisk Position
                            Dave Roberts

                            Hey Douglas,

                             

                            You can use the class "mktoAsterix" to target the native mktoAsterix.

                            Screenshot_040418_070732_AM.jpg

                             

                            I'll normally write something like this to hide them:

                             

                            .mktoAsterix {display:none !important;}

                             

                            For the other <span> approach, you could add an attribute to your span like this:

                            <span name="myElement-required" style="color:red">*</span>

                             

                            Then you could target that span using something similar to the CSS you found above:

                            span[name="myElement-required"] {

                            /* woohoo */

                            }

                             

                            ----

                            I went in and had a look at the form sample you posted and put together a few lines of CSS that seem to be ironing that out for me in Chrome at least. I tried to color code the CSS parts so those made sense in context:

                            Screenshot_040418_072747_AM.jpg

                             

                            Here's the CSS I used to modify this:

                            .mktoLogicalField.mktoCheckboxList.mktoHasWidth.mktoRequired {

                                float: left !important;

                                width: 95% !important;

                                margin-left: 2% !important;

                            }

                            .mktoButtonRow {

                                clear: both;

                                padding-top:20px !important;

                            }

                            .mktoAsterix {

                                float: left;

                                clear: both;

                            }

                             

                            ---

                            ..then I noticed that the asterisk were on the left side of the checkbox instead on the right side, so I modified the CSS a little to give you another option here. I've hidden the <span> asterix in this example (you could just remove it) and set a style to look for a ".mktoRequired" checkbox list and give that a little extra margin-right to make room for the asterix on the right side of the label.

                            Screenshot_040418_074630_AM.jpg

                            Here's the code for that if you wanted to give it a try, this builds on the previous example a bit.:

                            .mktoLogicalField.mktoCheckboxList {

                                float: left !important;

                                width: 97% !important;

                            }

                            .mktoButtonRow {

                                clear: both;

                                padding-top:20px !important; /* push button down a bit */

                            }

                            .mktoAsterix {

                                float: left;

                                clear: both;

                            }

                            /* add specific labels here for each required checkbox item */

                            label[for="Unsubscribed"] .mktoAsterix,

                            label[for="DSCORGPKG__Exclude_Update__c_account"] .mktoAsterix {

                                position: relative;

                                left: 2.5rem;

                                top: 0.5rem;

                            }

                            .mktoRequired.mktoCheckboxList input+label:before {

                                margin-right: 20px;

                            }

                             

                            Let me know if any of this is helpful / worked or if you've got questions on what's going on here.

                            1 of 1 people found this helpful