Removing border for 1 Field Set while having 2 Field Sets on the Form | Community
Skip to main content
F
Fethi_Erimcag
New Participant
September 22, 2021
Solved

Removing border for 1 Field Set while having 2 Field Sets on the Form

  • September 22, 2021
  • 2 replies
  • 4792 views

Hello, 

 

Is it possible to remove the border of 1 Field Set in my form while keeping the border for a second Field Set. 

 

I used the following CSS:

.mktoForm fieldset { border:none!important; }

But this removes borders for all fieldsets. 

 

Thank you

Best answer by SanfordWhiteman

Yes and no.

 

You could style the fieldset using nth-child-of-type(). But I find this approach extraordinarily fragile as it depends on the position of fields/fieldsets, which could change at any time and should not affect styles.

 

Instead I would use my FormsPlus::Tag helper, which lets you style the fieldset directly based on the fields it contains. Demo and download here:

 

MktoForms2 :: FormsPlus::Tag 0.2.4+ [Demo]

2 replies

SanfordWhiteman
SanfordWhitemanAccepted solution
New Participant
September 22, 2021

Yes and no.

 

You could style the fieldset using nth-child-of-type(). But I find this approach extraordinarily fragile as it depends on the position of fields/fieldsets, which could change at any time and should not affect styles.

 

Instead I would use my FormsPlus::Tag helper, which lets you style the fieldset directly based on the fields it contains. Demo and download here:

 

MktoForms2 :: FormsPlus::Tag 0.2.4+ [Demo]

    F
    Fethi_ErimcagAuthor
    New Participant
    September 24, 2021

    Thank you Sanford - the FormsPlus::Tag helper is really neat. 

     

    I have been playing around with it and using the pre-loaded form. 

    I seem to be running into a problem with the syntax: 

     

    .mktoForm .mktoFormRow[data-wrapper-for~="Disclaimer"] { background: red; border-color: #ffffff; color: white; font-family: Times; }

     

    All work except for the border-color. In the above example I used the Hex Value but also tried the Keyword 'white'. I checked to see if the Hex Value would work instead of the Keyword with the 'color' entry and it did work. So I think the issue in my code lies the usage of 'border-color'. 

     

    Please see below screen grab: 

     

     

    I also checked the Elements' Styles section to see if I am using the right terminology. 

     

     

    Where am I going wrong?

     

    Thank you

    SanfordWhiteman
    SanfordWhiteman
    New Participant
    September 24, 2021

    border-color doesn’t matter if there’s no border.

    .mktoForm .mktoFormRow[data-wrapper-for~="Disclaimer"] { border: 2px solid fuchsia; }

     

    Jo_Pitts1
    Jo_Pitts1
    Community Manager
    September 22, 2021

    @fethi_erimcag ,

    What you're seeing here is normal CSS behaviour - I'm presuming you know that already 🙂

     

    There are those who are far more clever than on (in many things, but definitely this topic), but I'd propose you:

    1. Create a new style on the page you are loading the forms to, that has no border.  e.g.
      .mktoSpecialForm fieldset { border:none!important; }​
    2. Use the whenReady listener to swap the CSS styles of the fields in the form you want to remove the border from to your .mktoSpecialForm style

    Let me know if you need more detail.

    Cheers

    Jo

     

    Terms & ConditionsAccessibility statement

    Loading footer...