Removing the border from a form's rich text

Bryan_Epstein
Level 5

Re: Removing the border from a form's rich text

Jesse, if you removed the css_style_goabroad_700.css file completely from the template, you would not want to do that. That is probably what caused the issue if so.

Sandy only mentioned to remove the line of code with the border attribute. You would want to do the following to keep the borders on the inputs:

1) Remove the border: 1px solid #000; line from the code on that CSS file (class: .em .form .mktoForm .mktoFieldWrap)

2) Modify the code for this style .em .form .mktoForm input[type="text"], .em .form .mktoForm input[type="email"], .em .form .mktoForm input[type="tel"], .em .form .mktoForm select

Right now, the style above has 2px solid #FFFF; as the border attribute value. Update that to 1px solid #000000, and you should be good to go.

Dave_Roberts
Level 8

Re: Removing the border from a form's rich text

How can I remove the border from the rich text field on my form? I've tried adding the code

".mkto.Form fieldset {
border: none!important; }"

 to the Custom Form CSS in the editor, but the dark border is still appearing around the rich text.

It looks like the selector you are using isn't written correctly to target the element you're after. The way it's written above, it would read: Find an element with a class of both "mkto" and "Form" and inside that element, find fieldset elements and style them this way { .. }.

I think it's the extra period between "mkto" and "Form" that might be throwing off your CSS -- you should be able to override most other styles by writing a more specific rule for this, but it's usually better to clean up the stuff you don't need rather than to override it.

In any case, if you had to override this, you could write the selector a little differently so that it would read as follows:

Find an element with a class of "mktoForm" (the <div> container that you place your form into) and inside that, find a form element with a class of "mktoForm", and inside that find an element with a class of "mktoFieldWrap" and inside that find the fieldset element(s) and style them this way { ... }.

.mktoForm form.mktoForm .mktoFieldWrap fieldset {
border: 0 !important;
}‍‍‍

note: you'll want to get "more specific" with your CSS when you're looking to override styles coming from your website's stylesheet. I've found that using the "form.mktoForm" prefix on the selector is usually enough to specifically target a Marketo form. When that doesn't work out, you can almost always break out the "big guns" and target the element by "id" which adds weight to the CSS declaration (i.e. it becomes heavier / more specific). In this case, you'd also use the id="..." value of the div with a class of "mktoForm" (on the link above, that div has an id of "myMarketoForm"). So the CSS would change to read something like: 

#myMarketoForm.mktoForm form.mktoForm .mktoFieldWrap fieldset {
border: 0 !important;
}‍‍‍