SOLVED

CSS-Required Asterisk Position

Go to solution
Anonymous
Not applicable

CSS-Required Asterisk Position

I am having a hell 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

1 ACCEPTED SOLUTION

Accepted Solutions
Grégoire_Miche2
Level 10

Re: CSS-Required Asterisk Position

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

View solution in original post

7 REPLIES 7
Grégoire_Miche2
Level 10

Re: CSS-Required Asterisk Position

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

Anonymous
Not applicable

Re: CSS-Required Asterisk Position

Thanks Grégoire. Super helpful.

Grégoire_Miche2
Level 10

Re: CSS-Required Asterisk Position

Hi Douglas,

Pls mark the answer as correct for future reference.

-Greg

Anonymous
Not applicable

Re: CSS-Required Asterisk Position

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

Anonymous
Not applicable

Re: CSS-Required Asterisk Position

Found a solution:

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

}

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

Grégoire_Miche2
Level 10

Re: CSS-Required Asterisk Position

Dave_Roberts
Level 10

Re: CSS-Required Asterisk Position

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.