CSS fixes for Marketo page, no HTML access

[nikostzounakos]

Hey!

I am trying to implement some simple CSS into a difficult situation imo

I have an input field, that I want to check if it has text within so the label can go straight up like when is happening on focus.
The thing this that this page is build in Marketo and I do not have any access to HTML just the CSS.
And also I have to use only classes not IDs etc.

Here is the input

It’s from this link: https://join.chief.com/TEST-FORM-STYLING.html
In the middle of the page.

Also another thing I am trying to do, is to target the label “Country” again only using classes and try to not affect the rest fields.
I am not sure if this can be done.

[DaveMaxwell]

@nikostzounakos

I have an input field, that I want to check if it has text within so the label can go straight up like when is happening on focus.

I’m confused. You already have that…

@nikostzounakos

Also another thing I am trying to do, is to target the label “Country” again only using classes and try to not affect the rest fields.
I am not sure if this can be done.

Again, already there…but this one doesn’t make sense so it has an id on it, and you want to affect just that so use it.

Am I missing something?

[nikostzounakos]

Yes the input field that you are pointing is the one at the start of the page, I am referring to the one in the middle.
You could write something and then get off the focus and see what’s happening.

About the “Country” label, I want to be target without the ID that it is now, because this will change many times.
I have to do it using the classes that are available and not interfere with the other elements.

[DaveMaxwell]

Why are you being inconsistent?

The field that works

The one that doesn’t (missing the placeholder)

If you’re using a tool then the rendered output SHOULD be the same. If it’s not, go back and do it again, or at least look at how the one that works is build and replicate it with the other one.

As for the country, I’d ask you to again, be consistent. The rendered html for this section gives a class (chief–choice–label) to hook onto and style consistently.

This one does not…

Finding out how to consistently render the html in Marketo is key to keeping your sanity on styling. If the rendered html isn’t consistent, you’re never going to be able to style the pages without jumping through major hoops to do so, and you’re going to have issues with quirks.

[nikostzounakos]

Hey the form would have this new structure every time, but I cannot use the above form that works for now.

This is the situation, I have to find a solution for the problem that I have described above

[DaveMaxwell]

@nikostzounakos

Hey the form would have this new structure every time, but I cannot use the above form that works for now.

I’m just curious, but why? It looks like the form is being built as that’s a test page, so how were the first sets (that work) built differently than the second sets (that don’t)? Why can’t they be built the same?

[nikostzounakos]

I am speaking with the guy that makes it, and it says that there is no other way and we have to do it this way.

Not sure what to tell you, but for this project we have to find a solution this way

I have mentioned everything to build the form etc

[DaveMaxwell]

@nikostzounakos

I am speaking with the guy that makes it, and it says that there is no other way and we have to do it this way.

Then your developer is doing you no favors whatsoever. A text box should render the same way every time. A checkbox list should render the same way every time.

Perhaps @PaulOB has a trick up his sleeve but I’m going to have to bow out because as far as I can tell, the “placeholder” one is impossible to do without javascript based on the way it’s rendered. The label is first, and you can’t do a css selector on an element based on something that comes AFTER it. Before it, yes. After it, no.

The label on the checkbox list should be relatively straight forward - if the list is rendered the same way each time.

[PaulOB]

@nikostzounakos

we have to do it this way.

It is impossible to style the label without using placeholder:shown otherwise there is no permanence. At the moment that element is moved out of the way using :focus-within but that only applies while the element has focus. You would either need to use the placeholder technique and move the label html under the input or use JS to achieve this. There is no other way to have something permanently moved.

@nikostzounakos

About the “Country” label, I want to be target without the ID that it is now, because this will change many times.

You can’t over-ride !important without using the same specificity and that means using an id. The only way would be to use the id from higher up like this.

#root .mktoForm.bodyForm .mktoFieldDescriptor label.mktoLabel[for="Country"]{
background:red!important;
}

I’ve used the for attribute (for=“country”) to target that specific label but the problem is that your use of for=“Country” is invalid anyway as it must match a single ID and you have no ID that matches.

I think you need to rethink this form as there are too many issues here

[nikostzounakos]

yeah true story.

Thanks for your help, I could not find a way either.

I will speak with the developer again