Custom CSS - Modify individual options for checkbox list | Community
Skip to main content
C
chloe-123
Level 2
September 22, 2020
Question

Custom CSS - Modify individual options for checkbox list

  • September 22, 2020
  • 2 replies
  • 4289 views

Hi All,

I'm pretty new to CSS and am using custom CSS on a checkbox list form. 

 

For each option, we want a different background image to differentiate the options.

Currently, I'm using ID's to identify each individual option, see screenshot below. 

 

However, I have realised that the form ID changes each time I upload this to our microsite so am unsure where to go from here. 

 

Please let me know any suggestions. 

 

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

2 replies

SanfordWhiteman
SanfordWhiteman
Level 10
September 22, 2020

Can you supply your URL? Not enough to go on here.

 

The Marketo Form ID definitely does not change.  What may change from render to render is the id attribute of a given label element. You can't use that in your selectors.

 

I can see already that you're repeating the background-size and background-position unnecessarily, those need to be moved into their own rule that covers all labels at once.

 

Are just trying to have different backgrounds from bottom to top? No need to know the IDs for that. Or is it a specific bg image for a specific option?

C
chloe-123Author
Level 2
September 22, 2020

Hi, thanks for helping. 

See link here: https://www.fujitsu.com/au/microsite/activatenow/agenda/

Currently there is just a plain background colour assigned to each option, but the aim is to look like below, where each background is a different image for each option (slow gradient from top to bottom)

 

C
chloe-123Author
Level 2
September 22, 2020

I may have remedied this by using this code instead. Not sure how good practice this is - pretty new to using and understanding CSS. 

Dave_Roberts
Dave_Roberts
Level 10
September 22, 2020

I see you're already using custom HTML in the label to create the <p> and <h4> tags - could you wrap those in a <div> and assign the background-image and properties inline instead? 

 

Here's the code I see on the page right now for the first checkbox option with the "Opening Address" title line:

 

 

<label for="mktoCheckbox_4535_0" id="LblmktoCheckbox_4535_0"> <p class="session-title">Opening Address</p> <p class="session-time">9:30am - 10:15am </p> <h4 class="txt_info sdec">Fujitsu ActivateNow 2020 Keynote <h 4=""> </h></h4> </label>

 

 

 *note: check out the <h4> - looks like there's a little code error at the end of that line ^^

 

It looks like you've got some padding (1.2em) set on the labels using CSS, you might need to remove that so you could add it instead to a <div> just inside the label. Take this HTML for example:

 

<label for="mktoCheckbox_4535_0" id="LblmktoCheckbox_4535_0"> <!-- ::::::: add this <div> with the background and padding inline instead :::::: --> <div style="background-image: https://marketing-oceania.global.fujitsu.com/rs/836-MOZ-238/images/ActivateNow_Agenda_Image-9.jpg; background-size: cover; background-repeat: no-repeat; background-position: top center; padding: 1.2em;"> <p class="session-title">Opening Address</p> <p class="session-time">9:30am - 10:15am </p> <h4 class="txt_info sdec">Fujitsu ActivateNow 2020 Keynote <h 4=""> </h></h4> <!-- ::::::: close the <div> here :::::: --> </div> </label>

 

 

Terms & ConditionsAccessibility statement

Loading footer...