CSS-Required Asterisk Position | Community
Skip to main content
April 3, 2018
Solved

CSS-Required Asterisk Position

  • April 3, 2018
  • 1 reply
  • 8413 views

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

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by Grégoire_Miche2

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

1 reply

Grégoire_Miche2
Grégoire_Miche2Accepted solution
New Participant
April 3, 2018

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

April 3, 2018

Thanks Grégoire. Super helpful.

Grégoire_Miche2
New Participant
April 3, 2018

Hi Douglas,

Pls mark the answer as correct for future reference.

-Greg