CSS Style based on selection? [RESOLVED]

Get Help
,
1

After submitting the form, a post is created and published with the form results. I would like to style the results based on the user selection.

For the field: Is your house on fire? = “Yes”, I would like the post to style this answer in large bold red.

Is there any way to apply a style based on user selection?

2

I think you could do this by adding the merge tag for this ‘yes’ field, as a CSS class to a div or span, and then adding the appropriate styles via the theme customizer. Something like this:

On fire? <span class="{Is your house on fire?:17:value}">{Is your house on fire?:17}</span>

And then your class is either “yes” or “no” and you add the styles via the customizer like this:

span.yes {
     font-weight: bold;
     color: red;
}
span.no {
     font-weight: normal;
     color: black;
}
3

Chris,

That sounds simpler than the solution I had come up with. Thanks, I think that will work well.

4

I hope it does work. I sort of came up with that on the fly :wink:

5

Yes, I went about it using the css data-attribute and your approach does about the same except it places it in the css rule. So I’ll make some classes “.house_on_fire_yes{ color:red;}” and “.house_on_fire_no{color: blue;}” and then place the merge field in the html markup

{house on fire:1}
.

That does it. Now I can style the responses based on the response!

Thanks, Chris.

6

Good deal. Thanks for the update Patrick.